import { Trash2 } from "lucide-react"

type Variant = {
  size: string
  color: string
  length?: string
  stock: number
  sku: string
  image?: string
  images: string[]
}

type Props = {
  variants: Variant[]
  onRemove: (index: number) => void
}

export default function VariantTable({ variants, onRemove }: Props) {
  return (
    <div className="border border-zinc-150 rounded-xl overflow-hidden shadow-sm">
      <table className="w-full text-left bg-white text-xs">
        <thead>
          <tr className="bg-zinc-50 border-b border-zinc-100 text-zinc-400 text-[9px] font-bold uppercase tracking-widest">
            <th className="py-2.5 px-4">Size Scale</th>
            <th className="py-2.5 px-4">Color Label</th>
            <th className="py-2.5 px-4">Length Option</th>
            <th className="py-2.5 px-4">Stock Volume</th>
            <th className="py-2.5 px-4">Images</th>
            <th className="py-2.5 px-4">SKU Code</th>
            <th className="py-2.5 px-4 text-center">Action</th>
          </tr>
        </thead>

        <tbody className="divide-y divide-zinc-100 font-medium">
          {variants.map((variant, index) => (
            <tr key={index} className="hover:bg-zinc-50/50 transition">
              {/* SIZE */}
              <td className="py-2.5 px-4">
                <span className="px-2 py-0.5 bg-zinc-950 text-white rounded-lg text-[10px] font-black uppercase tracking-wider">
                  {variant.size}
                </span>
              </td>

              {/* COLOR */}
              <td className="py-2.5 px-4 text-zinc-700 text-xs font-semibold">
                {variant.color}
              </td>

              {/* LENGTH */}
              <td className="py-2.5 px-4">
                {variant.length ? (
                  <span className="px-2 py-0.5 bg-zinc-50 text-zinc-700 rounded-lg text-[10px] font-bold border border-zinc-150">
                    {variant.length}
                  </span>
                ) : (
                  <span className="text-zinc-400 text-[10px] italic">
                    Standard
                  </span>
                )}
              </td>

              {/* STOCK */}
              <td className="py-2.5 px-4 font-mono text-zinc-900 font-bold text-xs">
                {variant.stock} units
              </td>

              {/* IMAGE */}
              <td className="py-2.5 px-4">
                {variant.images && variant.images.length > 0 ? (
                  <div className="flex -space-x-2">
                    {variant.images.slice(0, 3).map((img, i) => (
                      <img key={i} src={img} alt={variant.sku} className="w-8 h-8 object-cover rounded-md border border-zinc-200 shadow-sm" />
                    ))}
                    {variant.images.length > 3 && (
                      <div className="w-8 h-8 rounded-md border border-zinc-200 bg-zinc-100 flex items-center justify-center text-[8px] font-bold z-10">
                        +{variant.images.length - 3}
                      </div>
                    )}
                  </div>
                ) : variant.image ? (
                  <img src={variant.image} alt={variant.sku} className="w-8 h-8 object-cover rounded-md border border-zinc-200 shadow-sm" />
                ) : (
                  <span className="text-zinc-400 text-[10px] italic">None</span>
                )}
              </td>

              {/* SKU */}
              <td className="py-2.5 px-4 font-mono text-[10px] text-zinc-400 font-bold">
                {variant.sku}
              </td>

              {/* REMOVE ACTION */}
              <td className="py-2.5 px-4 text-center">
                <button
                  type="button"
                  onClick={() => onRemove(index)}
                  className="p-1.5 rounded-lg text-zinc-400 hover:text-red-500 hover:bg-red-50 transition cursor-pointer"
                >
                  <Trash2 size={13} />
                </button>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  )
}