"use client";

import { IconClock, IconMail, IconSend2 } from "@tabler/icons-react";
import { m } from "motion/react";

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

// Invitations d'équipe — invite colleagues and clients in a few clicks.
type Invite = {
  email: string;
  status: string;
  cls: string;
  pending?: boolean;
};

const pending: Invite[] = [
  {
    email: "alex@agence.fr",
    status: "Accepted",
    cls: "bg-brand-success/14 text-brand-success",
  },
  {
    email: "lea@client.com",
    status: "Pending",
    cls: "bg-brand-yellow/14 text-[#854d0e] dark:text-brand-yellow",
    pending: true,
  },
  {
    email: "sam@studio.io",
    status: "Pending",
    cls: "bg-brand-yellow/14 text-[#854d0e] dark:text-brand-yellow",
    pending: true,
  },
];

export const SkeletonThree = () => {
  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 rounded-2xl border p-3">
        {/* invite input */}
        <div className="border-hairline-2 flex items-center gap-2 rounded-xl border bg-black/[0.03] p-1.5 pl-3 dark:bg-white/[0.03]">
          <IconMail className="text-ink-4 size-4 shrink-0" />
          <span className="text-ink-3 flex-1 text-[12px]">
            email@company.com
          </span>
          <button className="bg-gradient-brand flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-[11px] font-semibold text-white">
            <IconSend2 className="size-3.5" />
            Invite
          </button>
        </div>

        {/* pending list */}
        <div className="mt-3 flex flex-col gap-1.5">
          {pending.map((p, i) => (
            <m.div
              key={p.email}
              initial={{ opacity: 0, y: 6 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ delay: 0.1 + i * 0.1, duration: 0.35 }}
              className="flex items-center gap-2 rounded-lg px-2 py-1.5"
            >
              <span className="text-ink-3 grid size-6 place-items-center rounded-full bg-black/[0.06] text-[10px] font-bold dark:bg-white/[0.06]">
                {p.email[0].toUpperCase()}
              </span>
              <span className="text-ink-2 flex-1 truncate text-[11.5px]">
                {p.email}
              </span>
              <span
                className={cn(
                  "flex items-center gap-1 rounded-full px-2 py-0.5 text-[9.5px] font-semibold",
                  p.cls,
                )}
              >
                {p.pending && <IconClock className="size-2.5" />}
                {p.status}
              </span>
            </m.div>
          ))}
        </div>
      </div>
    </div>
  );
};