import Link from "next/link";
import type { Kid } from "@/app/data/kids";

/**
 * Colores dinámicos → utilities Tailwind con valores exactos.
 * El set de pares del mock es cerrado; nunca se usan atributos style.
 */
const AVATAR_COLORS: Record<string, string> = {
  "A9D9E8-1F7A93": "bg-[#A9D9E8] text-[#1F7A93]",
  "F4B8CC-C44A7A": "bg-[#F4B8CC] text-[#C44A7A]",
  "B9DEC4-3E8B62": "bg-[#B9DEC4] text-[#3E8B62]",
  "F4DC8E-9A7B1E": "bg-[#F4DC8E] text-[#9A7B1E]",
  "C9B6E8-7B5FC0": "bg-[#C9B6E8] text-[#7B5FC0]",
};

function avatarClasses(kid: Kid): string {
  const key = `${kid.avatar.bg.replace("#", "")}-${kid.avatar.text.replace("#", "")}`;
  return AVATAR_COLORS[key] ?? "";
}

/** "2 padres vinculados" | "1 padre vinculado" | "sin padres vinculados". */
function parentsLabel(kid: Kid): string {
  if (kid.parents.length === 0) return "sin padres vinculados";
  return `${kid.parents.length} ${kid.parents.length === 1 ? "padre" : "padres"} vinculados`;
}

export default function KidCard({ kid }: { kid: Kid }) {
  return (
    <Link
      href={`/kids/${kid.slug}`}
      className="flex min-w-0 items-center gap-[14px] rounded-[18px] border border-[#ECE0D0] bg-[#FFFDF9] p-4 shadow-[0_4px_14px_-12px_rgba(120,90,60,.5)] transition duration-150 hover:-translate-y-[2px] hover:border-[#F2A78E]"
    >
      <div
        className={`flex h-12 w-12 flex-none items-center justify-center rounded-full font-display text-[19px] font-semibold ${avatarClasses(kid)}`}
      >
        {kid.initial}
      </div>
      <div className="min-w-0 flex-1">
        <div className="truncate font-display text-base font-semibold text-[#3F362E]">{kid.name}</div>
        <div className="text-[13px] text-[#A89A8B]">
          {kid.age} años · {parentsLabel(kid)}
        </div>
      </div>
      {kid.parents.length === 0 ? (
        <span className="flex-none rounded-full bg-[#F9D2DE] px-[9px] py-[5px] text-[11px] font-extrabold text-[#C56486]">
          VINCULAR
        </span>
      ) : kid.allergies.length > 0 ? (
        <span className="flex-none rounded-full bg-[#FBD8CC] px-[9px] py-[5px] text-[11px] font-extrabold text-[#D9684A]">
          {kid.allergies[0]}
        </span>
      ) : (
        <svg
          className="flex-none"
          width="18"
          height="18"
          viewBox="0 0 24 24"
          fill="none"
          stroke="#CBB89F"
          strokeWidth="2.2"
          strokeLinecap="round"
          strokeLinejoin="round"
        >
          <path d="m9 18 6-6-6-6" />
        </svg>
      )}
    </Link>
  );
}