import { Trash2 } from 'lucide-react';
import { downloadUrl } from '../../api/files';
import type { FileItem } from '../../types';

interface FileListRowProps {
  file: FileItem;
  onDelete: (id: string) => void;
}

export function FileListRow({ file, onDelete }: FileListRowProps) {
  return (
    <a
      href={downloadUrl(file.id)}
      target="_blank"
      rel="noreferrer"
      className="group flex items-center gap-4 border-b border-line px-4 py-3 transition-colors hover:bg-field sm:px-[18px]"
    >
      <span className="h-[34px] w-[34px] flex-none overflow-hidden rounded-[10px]" style={{ background: file.thumbGradient }}>
        {file.kind === 'image' && (
          <img src={downloadUrl(file.id)} alt="" className="h-full w-full object-cover" />
        )}
      </span>
      <div className="min-w-0 flex-1">
        <p className="m-0 truncate text-[13.5px] font-semibold text-ink">{file.name}</p>
        <p className="m-0 mt-0.5 text-[11.5px] text-ink-soft">{file.extLabel}</p>
      </div>
      <span className="w-[90px] flex-none text-[12.5px] text-ink-soft">{file.size}</span>
      <span className="w-[120px] flex-none text-[12.5px] text-ink-soft">{file.modified}</span>
      <button
        type="button"
        onClick={(e) => {
          e.preventDefault();
          e.stopPropagation();
          onDelete(file.id);
        }}
        aria-label={`Supprimer ${file.name}`}
        className="flex h-7 w-7 flex-none items-center justify-center rounded-lg text-ink-soft opacity-0 transition-opacity hover:text-danger group-hover:opacity-100"
      >
        <Trash2 size={14} strokeWidth={2} />
      </button>
    </a>
  );
}