import { Link } from "react-router-dom";
import { AlertTriangle } from "lucide-react";
import type { TechniqueStatus } from "../types/models";

interface TechniqueCellProps {
  mitreId: string;
  name: string;
  status: TechniqueStatus;
  reviewRequired?: boolean;
}

const statusColors: Record<TechniqueStatus, { bg: string; border: string; text: string }> = {
  validated: {
    bg: "bg-green-900/40",
    border: "border-green-500/50",
    text: "text-green-400",
  },
  partial: {
    bg: "bg-yellow-900/40",
    border: "border-yellow-500/50",
    text: "text-yellow-400",
  },
  in_progress: {
    bg: "bg-blue-900/40",
    border: "border-blue-500/50",
    text: "text-blue-400",
  },
  not_covered: {
    bg: "bg-red-900/40",
    border: "border-red-500/50",
    text: "text-red-400",
  },
  not_evaluated: {
    bg: "bg-gray-800/40",
    border: "border-gray-600/50",
    text: "text-gray-400",
  },
  review_required: {
    bg: "bg-yellow-900/40",
    border: "border-yellow-500/50",
    text: "text-yellow-400",
  },
};

export default function TechniqueCell({
  mitreId,
  name,
  status,
  reviewRequired = false,
}: TechniqueCellProps) {
  const colors = statusColors[status] || statusColors.not_evaluated;

  return (
    <Link
      to={`/techniques/${mitreId}`}
      className={`
        relative block w-full rounded-md border p-2 text-left transition-all
        hover:scale-[1.02] hover:shadow-lg hover:z-10
        ${colors.bg} ${colors.border}
      `}
    >
      {reviewRequired && (
        <div className="absolute -right-1 -top-1 rounded-full bg-orange-500 p-0.5">
          <AlertTriangle className="h-3 w-3 text-white" />
        </div>
      )}
      <p className={`text-xs font-semibold ${colors.text}`}>{mitreId}</p>
      <p className="mt-0.5 truncate text-xs text-gray-300" title={name}>
        {name}
      </p>
    </Link>
  );
}
