import React from "react";

interface QuotationCardProps {
  id: string;
  name: string;
  size: string;
  status?: string;
  onRemove?: (id: string) => void;
  onDownload?: (id: string) => void;
  showRemove?: boolean;
}

export default function QuotationCard({
  id,
  name,
  size,
  status,
  onRemove,
  onDownload,
  showRemove = true,
}: QuotationCardProps) {
  return (
    <div className="group relative border border-gray-200 rounded-xl p-4 bg-gray-50 hover:bg-white hover:border-teal-500 hover:shadow-md transition-all cursor-pointer overflow-visible">
      {showRemove && onRemove && (
        <button
          onClick={() => onRemove(id)}
          className="absolute -top-2 -right-2 bg-red-500 hover:bg-red-600 text-white rounded-full p-1.5 opacity-0 group-hover:opacity-100 transition-opacity shadow-lg z-10"
        >
          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="4">
            <path d="M18 6L6 18M6 6l12 12" />
          </svg>
        </button>
      )}

      {status === "Approved" && (
        <div className="absolute -top-2 -right-2 z-20">
          <div className="bg-green-600 text-white rounded-full p-1.5 shadow-md border-2 border-white">
            <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth="4">
              <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
            </svg>
          </div>
          <div className="absolute bottom-full right-0 mb-3 hidden group-hover:flex flex-col items-end pointer-events-none animate-in fade-in slide-in-from-bottom-1 duration-200">
            <div className="relative bg-gray-900/95 backdrop-blur-sm text-white text-[10px] tracking-wider uppercase py-1.5 px-3 rounded-md shadow-2xl border border-white/10 whitespace-nowrap">
              Approved Quotation
              <div className="absolute top-full right-[7px] -mt-1">
                <div className="border-4 border-transparent border-t-gray-900/95"></div>
              </div>
            </div>
          </div>
        </div>
      )}

      <div className="flex items-start gap-3">
        <div className="bg-teal-100 p-3 rounded-lg text-teal-700 shrink-0">
          <svg width="24" height="24" fill="currentColor" viewBox="0 0 20 20">
            <path d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4z" />
          </svg>
        </div>

        <div className="flex-1 min-w-0">
          <p className="text-sm font-bold text-gray-800 truncate" title={name}>
            {name}
          </p>
          <div className="mt-1 flex items-center justify-between gap-2">
            <p className="text-xs text-gray-500">{size}</p>
            {onDownload && (
              <button
                onClick={(e) => {
                  e.stopPropagation();
                  onDownload(id);
                }}
                className="text-[11px] px-2 py-[2px] rounded-md border border-teal-500 text-teal-600 hover:bg-teal-50 hover:text-teal-700 transition-all"
              >
                Download
              </button>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}