"use client";

import { m } from "motion/react";

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

// Multi-source par date de MAJ — same metric kept per provider with its
// own freshness date. No blind overwrite; switch the active view per source.
type Source = {
  name: string;
  value: string;
  date: string;
  dot: string;
  active?: boolean;
};

const sources: Source[] = [
  {
    name: "Semrush",
    value: "880",
    date: "Updated Jun 12",
    dot: "bg-brand-orange",
    active: true,
  },
  {
    name: "Ahrefs",
    value: "910",
    date: "Updated Jun 10",
    dot: "bg-brand-blue",
  },
  {
    name: "GSC",
    value: "1 020",
    date: "Updated Jun 14",
    dot: "bg-brand-yellow",
  },
];

export const SkeletonOne = () => {
  return (
    <div className="absolute inset-x-0 top-6 bottom-0 flex items-end justify-center mask-b-from-90% px-6">
      <m.div
        initial={{ opacity: 0, y: 20 }}
        whileInView={{ opacity: 1, y: 0 }}
        viewport={{ once: true }}
        transition={{ duration: 0.5, ease: "easeOut" }}
        className="border-hairline bg-surface shadow-premium w-full max-w-sm rounded-2xl border"
      >
        {/* header */}
        <div className="border-hairline flex items-center justify-between border-b px-4 py-3">
          <p className="text-ink-2 text-xs font-semibold">
            <span className="text-ink-1">seo mcp tool</span>
            <span className="text-ink-4"> · Volume</span>
          </p>
          <span className="border-hairline-2 text-ink-3 flex items-center gap-1 rounded-full border px-2 py-0.5 text-[10px] font-semibold">
            By source ▾
          </span>
        </div>

        {/* source rows */}
        <div className="flex flex-col p-2">
          {sources.map((s, i) => (
            <m.div
              key={s.name}
              initial={{ opacity: 0, x: -8 }}
              whileInView={{ opacity: 1, x: 0 }}
              viewport={{ once: true }}
              transition={{ delay: 0.15 + i * 0.12, duration: 0.35 }}
              className={cn(
                "flex items-center gap-3 rounded-xl px-3 py-2.5",
                s.active &&
                  "ring-hairline-2 bg-black/[0.04] ring-1 ring-inset dark:bg-white/[0.04]",
              )}
            >
              <span className={cn("size-2 shrink-0 rounded-full", s.dot)} />
              <span className="text-ink-1 flex-1 text-[12px] font-medium">
                {s.name}
              </span>
              <span className="font-display text-ink-1 text-sm font-bold tabular-nums">
                {s.value}
              </span>
              <span className="text-ink-4 w-20 text-right text-[10px]">
                {s.date}
              </span>
            </m.div>
          ))}
        </div>

        {/* footer note */}
        <div className="border-hairline border-t px-4 py-2.5">
          <p className="text-ink-4 text-[10.5px]">
            No overwrite, every source kept
          </p>
        </div>
      </m.div>
    </div>
  );
};