import { Box, CheckCircle2 } from 'lucide-react';
import StatusBadge from '@/components/app/StatusBadge';
import { Image } from '@/components/ui/image';

export default function CoverCard({ cover, onSelect, selected, children }) {
  return (
    <button onClick={() => onSelect?.(cover)} className={`group relative w-full overflow-hidden rounded-2xl border text-left transition hover:-translate-y-0.5 ${selected ? 'border-cyan-400 ring-1 ring-cyan-400/30' : 'border-white/[0.06] hover:border-cyan-400/40'}`}>
      <span className={`absolute inset-x-0 top-0 h-[3px] ${cover.validationStatus === 'validated' ? 'bg-emerald-400' : cover.validationStatus === 'warning' ? 'bg-amber-400' : 'bg-red-500'}`} />
      <div className="viewport-grid relative grid h-36 place-items-center overflow-hidden">
        {cover.previewImageUrl ? <Image src={cover.previewImageUrl} alt={`${cover.name} preview`} className="h-full w-full opacity-90" /> : <Box size={48} className="text-cyan-400/30" />}
        <span className="absolute left-2 top-2 rounded border border-white/10 bg-black/45 px-1.5 py-0.5 text-[9px] uppercase tracking-wider text-slate-400 backdrop-blur">{cover.sourceFormat?.toUpperCase()}</span>
      </div>
      <div className="p-4">
        <div className="mb-3 flex items-start justify-between gap-2">
          <div>
            <h3 className="font-heading text-sm font-semibold text-white">{cover.name}</h3>
            <p className="mono mt-0.5 text-[11px] text-slate-500">v{cover.version} · {cover.limbType} · {cover.side}</p>
          </div>
          <StatusBadge status={cover.validationStatus} />
        </div>
        <div className="grid grid-cols-2 gap-1.5 text-[11px] text-slate-400">
          <p>Connector <span className="text-slate-200">{cover.connectorType || '—'}</span></p>
          <p>Ossiguard <span className="text-slate-200">{cover.ossiguardProfile || '—'}</span></p>
        </div>
        {selected && <p className="mt-3 flex items-center gap-1 text-xs font-semibold text-cyan-300"><CheckCircle2 size={14} />Selected cover</p>}
        {children}
      </div>
    </button>
  );
}