import { CrosshairIcon } from "lucide-react";

interface MissionHeaderProps {
  name: string;
  codeName: string;
  operationType: "main" | "side" | "external";
  status: string;
}

const statusColors: Record<string, string> = {
  Concept: "bg-muted text-muted-foreground",
  Planning: "bg-muted text-muted-foreground",
  Ready: "bg-blue-500/20 text-blue-400",
  Scheduled: "bg-amber-500/20 text-amber-400",
  Active: "bg-green-500/20 text-green-400",
  Completed: "bg-emerald-500/20 text-emerald-400",
  Cancelled: "bg-red-500/20 text-red-400",
};

const operationTypeColors: Record<string, string> = {
  main: "bg-primary/20 text-primary",
  side: "bg-muted text-muted-foreground",
  external: "bg-purple-500/20 text-purple-400",
};

export function MissionHeader({
  name,
  codeName,
  operationType,
  status,
}: MissionHeaderProps) {
  return (
    <div className="flex flex-col gap-2">
      <div className="flex items-center gap-2">
        <CrosshairIcon className="size-4 text-muted-foreground" />
        <span className="font-mono text-xs text-muted-foreground uppercase tracking-wider">
          {codeName}
        </span>
      </div>
      <h1 className="text-2xl font-bold tracking-tight">{name}</h1>
      <div className="flex flex-wrap items-center gap-2">
        <span
          className={`text-[10px] font-semibold uppercase tracking-wider px-1.5 py-0.5 rounded ${statusColors[status] ?? "bg-muted text-muted-foreground"}`}
        >
          {status}
        </span>
        <span
          className={`text-[10px] font-semibold uppercase tracking-wider px-1.5 py-0.5 rounded ${operationTypeColors[operationType] ?? "bg-muted text-muted-foreground"}`}
        >
          {operationType}
        </span>
      </div>
    </div>
  );
}