"use client";

import { useCallback, useState } from "react";
import { ChevronRight } from "lucide-react";
import { cn } from "@/lib/cn";
import { LEADERS, type Leader } from "@/lib/content";
import LeaderModal from "./LeaderModal";

const TILE_CLS: Record<Leader["tile"], string> = {
  navy: "bg-navy text-white",
  brand: "bg-brand text-white",
  amber: "bg-accent text-navy",
};

function LeaderCard({ leader, onMore }: { leader: Leader; onMore: () => void }) {
  return (
    <article className="flex flex-col rounded-2xl border border-line bg-white p-7 max-sm:p-6">
      <span
        aria-hidden="true"
        className={cn(
          "grid size-14 place-items-center rounded-2xl font-display text-[20px] font-bold tracking-tight",
          TILE_CLS[leader.tile]
        )}
      >
        {leader.initials}
      </span>
      <h3 className="mt-5 font-display text-[19px] font-bold tracking-tight text-ink">
        {leader.name}
      </h3>
      <p className="mt-1 text-[14px] font-semibold text-brand">{leader.role}</p>
      <p className="mt-3 line-clamp-3 text-[13.5px] leading-relaxed text-body">
        {leader.summary}
      </p>
      <div className="mt-auto pt-5">
        <button
          type="button"
          onClick={onMore}
          aria-haspopup="dialog"
          className="inline-flex items-center gap-1.5 font-mono text-[12px] font-semibold tracking-[0.08em] text-brand hover:text-brand-dark"
        >
          KNOW MORE
          <ChevronRight size={15} aria-hidden="true" />
        </button>
      </div>
    </article>
  );
}

export default function Leadership() {
  const [active, setActive] = useState<Leader | null>(null);
  const close = useCallback(() => setActive(null), []);

  return (
    <>
      <div className="mt-11 grid gap-5 md:grid-cols-3 max-md:max-w-[560px]">
        {LEADERS.map((l) => (
          <LeaderCard key={l.name} leader={l} onMore={() => setActive(l)} />
        ))}
      </div>
      {active && <LeaderModal leader={active} onClose={close} />}
    </>
  );
}