import { CalendarClock, HandCoins, LineChart, MapPin, MessageSquareText } from "lucide-react";
import { Alert } from "@/components/ui/alert";
import { PageHeader } from "@/components/shared/page-header";
import { useI18n } from "@/i18n";

const icons = {
  tracking: MapPin,
  payments: HandCoins,
  attendance: CalendarClock,
  performance: LineChart,
  support: MessageSquareText,
} as const;

/**
 * A professional "integration-ready" placeholder for a feature whose backend
 * endpoint does not exist yet. Kept first-class in the UI so the capability gap
 * is explicit, never hidden behind a fake screen with mock data.
 */
export function FeatureGap({
  kind,
  title,
  subtitle,
  gapTitle,
  gapBody,
  requirement,
  details,
}: {
  kind: keyof typeof icons;
  title: string;
  subtitle: string;
  gapTitle: string;
  gapBody: string;
  requirement?: string;
  details: string[];
}) {
  const { dir } = useI18n();
  const Icon = icons[kind];

  return (
    <div>
      <PageHeader title={title} subtitle={subtitle} />
      <div className="mx-auto max-w-2xl pt-6">
        <div className="flex flex-col items-center gap-4 text-center">
          <div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-primary-soft">
            <Icon className="h-7 w-7 text-primary" aria-hidden />
          </div>
          <h2 className="text-lg font-semibold text-foreground">{gapTitle}</h2>
          <p className="max-w-xl text-sm leading-relaxed text-muted-foreground">{gapBody}</p>
        </div>
        <Alert variant="info" className="mt-8" icon={HandCoins}>
          {requirement ? (
            <span className="font-medium">{requirement}</span>
          ) : null}
        </Alert>
        <ul className="mt-3 space-y-2 rounded-xl border bg-surface p-5 text-sm text-muted-foreground">
          {details.map((detail, index) => (
            <li key={index} className="flex gap-2">
              <span aria-hidden className="mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full bg-primary" style={{ direction: dir }} />
              <span className="text-start">{detail}</span>
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
}