import type { FileItem } from '../../types';

export function FileListRow({ file }: { file: FileItem }) {
  return (
    <div className="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 rounded-[10px]" style={{ background: file.thumbGradient }} />
      <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>
    </div>
  );
}