import type { ReactNode } from "react";
import { ChevronRight } from "lucide-react";

type PracticeDoorProps = {
  icon: ReactNode;
  title: string;
  detail: string;
  onOpen?: () => void;
};

// admin-v2 .door: a destination tile on the Practice Dashboard and in the service list. It is the shared
// card (DESIGN.md 6b: destination tiles take the card treatment; Spencer 2026-09-25: cards are one global style).
// A door with nowhere to go is drawn static - no link ink, chevron or hover - so it never looks clickable.
const PracticeDoor = ({ icon, title, detail, onOpen }: PracticeDoorProps) => {
  const body = (
    <>
      <span className="practice-dashboard__door-icon" aria-hidden>{icon}</span>
      <span className="flex min-w-0 flex-1 flex-col">
        <span className={onOpen ? "ak-card__title ak-link" : "ak-card__title"}>{title}</span>
        <span className="ak-card__description mt-[3px]">{detail}</span>
      </span>
      {onOpen && <ChevronRight aria-hidden className="ak-chev" />}
    </>
  );
  const layout = "ak-card flex min-h-16 w-full items-center gap-[11px] text-left";
  return onOpen ? (
    <button type="button" onClick={onOpen} className={layout}>{body}</button>
  ) : (
    <div className={`${layout} ak-card--panel`}>{body}</div>
  );
};

export default PracticeDoor;