"use client";

import { IconCheck, IconPlus } from "@tabler/icons-react";
import { m } from "motion/react";

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

// Multi-organisations — switch between several orgs from one account.
type Org = {
  name: string;
  meta: string;
  initials: string;
  grad: string;
  active?: boolean;
};

const orgs: Org[] = [
  {
    name: "Eleva SEO",
    meta: "12 members · Agency",
    initials: "ES",
    active: true,
    grad: "bg-gradient-brand",
  },
  {
    name: "Acme Corp",
    meta: "4 members · Pro",
    initials: "AC",
    grad: "bg-[#0a5dc2]", // a11y: deeper blue so white initials meet 4.5:1
  },
  {
    name: "Studio Nord",
    meta: "2 members · Pro",
    initials: "SN",
    grad: "bg-[#b4400f]", // a11y: deeper orange so white initials meet 4.5:1
  },
];

export const SkeletonOne = () => {
  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-2">
        {orgs.map((o, i) => (
          <m.div
            key={o.name}
            initial={{ opacity: 0, y: 8 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ delay: i * 0.1, duration: 0.35 }}
            className={cn(
              "flex items-center gap-3 rounded-xl px-3 py-2.5",
              o.active &&
                "ring-hairline-2 bg-black/[0.04] ring-1 ring-inset dark:bg-white/[0.04]",
            )}
          >
            <span
              className={cn(
                "grid size-9 shrink-0 place-items-center rounded-lg text-xs font-bold text-white",
                o.grad,
              )}
            >
              {o.initials}
            </span>
            <div className="min-w-0 flex-1">
              <p className="text-ink-1 truncate text-[13px] font-semibold">
                {o.name}
              </p>
              <p className="text-ink-4 truncate text-[10.5px]">{o.meta}</p>
            </div>
            {o.active && (
              <span className="bg-gradient-brand grid size-5 place-items-center rounded-full text-white">
                <IconCheck className="size-3" />
              </span>
            )}
          </m.div>
        ))}
        <button className="border-hairline-2 text-ink-3 mt-1 flex w-full items-center gap-2 rounded-xl border border-dashed px-3 py-2.5 text-[12px] font-medium">
          <IconPlus className="size-4" />
          New organization
        </button>
      </div>
    </div>
  );
};