File Input

'use client';
import { useRef, useState } from 'react';
import { Upload } from 'lucide-react';

export function FileInput({ accept, maxBytes, multiple, onFiles }: Props) {
  const ref = useRef<HTMLInputElement>(null);
  const [drag, setDrag] = useState(false);

  function handleFiles(list: FileList | null) {
    if (!list) return;
    const files = Array.from(list).filter(f => {
      if (accept && !accept.includes(f.type)) return false;
      if (maxBytes && f.size > maxBytes) return false;
      return true;
    });
    onFiles(files);
  }

  return (
    <div
      onClick={() => ref.current?.click()}
      onDragOver={(e) => { e.preventDefault(); setDrag(true); }}
      onDragLeave={() => setDrag(false)}
      onDrop={(e) => { e.preventDefault(); setDrag(false); handleFiles(e.dataTransfer.files); }}
      role="button" tabIndex={0}
      style={{
        border: `1.5px dashed ${drag ? T.borderInk : T.border}`,
        background: drag ? T.brassTint : T.surface,
        borderRadius: RADIUS.lg,
        padding: SP[8],
        textAlign: 'center',
        cursor: 'pointer',
      }}
    >
      <Upload size={20} />
      <p>Arraste arquivos ou clique</p>
      <input ref={ref} type="file" multiple={multiple} accept={accept?.join(',')}
        hidden onChange={(e) => handleFiles(e.target.files)} />
    </div>
  );
}