"use client";

import Link from "next/link";
import type { GameNpc } from "@/payload-types";
import { Badge } from "@/components/ui/badge";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";

interface NpcCardProps {
  readonly npc: GameNpc;
}

export function NpcCard({ npc }: NpcCardProps) {
  const factionName =
    typeof npc.faction === "object" && npc.faction !== null ? npc.faction.name : null;

  return (
    <Link href={`/personnel/contacts/${npc.id}`} className="block h-full">
      <Card className="h-full transition-colors hover:bg-accent/50">
        <CardHeader className="gap-2">
          <CardTitle className="text-base">{npc.name}</CardTitle>
          <p className="text-sm text-muted-foreground">
            {npc.occupation ?? "Occupation not recorded"}
          </p>
          <div className="flex flex-wrap items-center gap-1.5">
            {npc.isInGame === true && (
              <Badge variant="secondary" className="border-emerald-500/30 text-emerald-500">
                In Game
              </Badge>
            )}
            {npc.isGenerated === true && (
              <Badge variant="outline" className="border-amber-500/40 text-amber-500">
                Generated
              </Badge>
            )}
            {npc.vendor?.enabled === true && (
              <Badge variant="outline" className="border-violet-500/40 text-violet-500">
                Vendor
              </Badge>
            )}
          </div>
        </CardHeader>
        <CardContent className="flex flex-col gap-2 text-sm">
          <div className="flex items-center justify-between gap-3">
            <span className="text-muted-foreground">Faction</span>
            <span className="truncate text-right">{factionName ?? "Unaffiliated"}</span>
          </div>
        </CardContent>
      </Card>
    </Link>
  );
}