import { useLocalizedName } from "@/shared/common/localizedName";
import { Check, X, ClipboardCheck } from "lucide-react";

interface LocaleValidationDto {
  am?: string;
  en: string;
}

interface ApprovalCardProps {
  id: string;
  name: LocaleValidationDto;
  unit?: LocaleValidationDto;
  time: string;
  onApprove: (id: string) => void;
  onReject: (id: string) => void;
  onClick: (id: string) => void;
  isLoading?: boolean;
}

const ApprovalCard = ({
  id,
  name,
  unit,
  time,
  onApprove,
  onReject,
  onClick,
  isLoading,
}: ApprovalCardProps) => {
  const localizedName = useLocalizedName();

  return (
    <div
      className="flex items-start gap-3 p-3 rounded-md border bg-yellow-50 border-yellow-300 hover:shadow-sm transition-all cursor-pointer"
      onClick={() => onClick(id)}
    >
      {/* Icon */}
      <div className="mt-1">
        <ClipboardCheck className="w-5 h-5 text-yellow-600" />
      </div>

      {/* Content */}
      <div className="flex-1 min-w-0">
        <h4 className="font-medium text-sm text-gray-900 break-all">
          {localizedName(name as { am: string; en: string })}
        </h4>

        {unit && (
          <p className="text-xs text-gray-600">
            {localizedName(unit as { am: string; en: string })}
          </p>
        )}

        <p className="text-[11px] text-gray-400 mt-1">{time}</p>
      </div>

      {/* Actions */}
      <div
        className="flex items-center gap-2"
        onClick={(e) => e.stopPropagation()} // prevent card click
      >
        <button
          onClick={() => onApprove(id)}
          disabled={isLoading}
          className="p-1.5 rounded-md bg-primary-100 hover:bg-primary-200 transition"
        >
          <Check className="w-4 h-4 text-primary-600" />
        </button>

        <button
          onClick={() => onReject(id)}
          disabled={isLoading}
          className="p-1.5 rounded-md bg-red-100 hover:bg-red-200 transition"
        >
          <X className="w-4 h-4 text-red-600" />
        </button>
      </div>
    </div>
  );
};

export default ApprovalCard;