"use client";

import { DecisionType } from "@/lib/types";
import { Check, X, AlertCircle } from "lucide-react";

interface StatusBadgeProps {
  decision: DecisionType;
}

export function StatusBadge({ decision }: StatusBadgeProps) {
  const config = {
    YES: {
      bg: "bg-green-950/40 border-green-700/50",
      text: "text-green-400",
      icon: <Check className="w-5 h-5" />,
      label: "MANUFACTURABLE",
    },
    NO: {
      bg: "bg-red-950/40 border-red-700/50",
      text: "text-red-400",
      icon: <X className="w-5 h-5" />,
      label: "NOT MANUFACTURABLE",
    },
    CONDITIONAL: {
      bg: "bg-yellow-950/40 border-yellow-700/50",
      text: "text-yellow-400",
      icon: <AlertCircle className="w-5 h-5" />,
      label: "CONDITIONALLY MANUFACTURABLE",
    },
  }[decision];

  return (
    <div
      className={`inline-flex items-center gap-3 px-4 py-3 rounded border font-mono text-sm font-semibold uppercase tracking-wide ${config.bg}`}
    >
      <span className={config.text}>{config.icon}</span>
      <span className={config.text}>{config.label}</span>
    </div>
  );
}