veza/apps/web/src/features/upload/components/upload-modal/UploadModalDropzone.tsx

import { FileAudio } from 'lucide-react';

export interface UploadModalDropzoneProps {
  getRootProps: () => object;
  getInputProps: () => object;
  isDragActive: boolean;
}

export function UploadModalDropzone({
  getRootProps,
  getInputProps,
  isDragActive,
}: UploadModalDropzoneProps) {
  return (
    <div
      {...getRootProps()}
      className={`
        border-2 border-dashed rounded-lg p-12 text-center cursor-pointer
        transition-colors
        ${isDragActive ? 'border-primary bg-primary/5' : 'border-muted-foreground/25'}
        hover:border-primary hover:bg-primary/5
      `}
    >
      <input {...getInputProps()} />
      <FileAudio className="mx-auto h-12 w-12 text-muted-foreground mb-4" />
      <p className="text-lg font-medium mb-2">
        {isDragActive ? 'Déposez le fichier ici' : 'Glissez-déposez un fichier audio'}
      </p>
      <p className="text-sm text-muted-foreground mb-4">
        ou cliquez pour sélectionner
      </p>
      <p className="text-xs text-muted-foreground">
        Formats acceptés: MP3, WAV, OGG, FLAC, M4A, AAC (max 100 MB)
      </p>
    </div>
  );
}