"use client";

import { m } from "motion/react";

import { cn } from "@/lib/utils";

// Rôles — Owner, admin, membre with scoped access.
const members = [
  {
    name: "Bastien A.",
    email: "bastien@seoinsight.app",
    role: "Owner",
    cls: "bg-gradient-brand text-white",
    grad: "bg-brand-orange",
  },
  {
    name: "Marie L.",
    email: "marie@seoinsight.app",
    role: "Admin",
    cls: "bg-brand-blue/15 text-[#0a5dc2] dark:text-[#5aa6ff]",
    grad: "bg-brand-blue",
  },
  {
    name: "Tom R.",
    email: "tom@seoinsight.app",
    role: "Member",
    cls: "bg-black/[0.06] text-ink-2 dark:bg-white/[0.06]",
    grad: "bg-brand-yellow",
  },
  {
    name: "Client X",
    email: "contact@acme.co",
    role: "Member",
    cls: "bg-black/[0.06] text-ink-2 dark:bg-white/[0.06]",
    grad: "bg-brand-success",
  },
] as const;

export const SkeletonTwo = () => {
  return (
    <div className="absolute inset-x-6 inset-y-4 flex items-center justify-center mask-b-from-90%">
      <div className="border-hairline bg-surface shadow-premium w-full max-w-sm overflow-hidden rounded-2xl border">
        <div className="border-hairline text-ink-4 border-b px-4 py-2.5 text-[11px] font-semibold tracking-wider uppercase">
          Members & roles
        </div>
        {members.map((member, i) => (
          <m.div
            key={member.email}
            initial={{ opacity: 0, x: -8 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            transition={{ delay: i * 0.1, duration: 0.35 }}
            className={cn(
              "flex items-center gap-3 px-4 py-2.5",
              i !== members.length - 1 && "border-hairline border-b",
            )}
          >
            <span
              className={cn(
                "size-7 shrink-0 rounded-full opacity-90",
                member.grad,
              )}
            />
            <div className="min-w-0 flex-1">
              <p className="text-ink-1 truncate text-[12.5px] font-medium">
                {member.name}
              </p>
              <p className="text-ink-4 truncate text-[10px]">{member.email}</p>
            </div>
            <span
              className={cn(
                "rounded-full px-2.5 py-0.5 text-[10px] font-semibold",
                member.cls,
              )}
            >
              {member.role}
            </span>
          </m.div>
        ))}
      </div>
    </div>
  );
};