import type { RefObject } from 'react'
import styles from '../../pages/UploadPage.module.css'

type UploadDropZoneProps = {
  dragOver: boolean
  fileInputRef: RefObject<HTMLInputElement | null>
  onDrop: (e: React.DragEvent) => void
  onDragOver: (e: React.DragEvent) => void
  onDragLeave: () => void
}

export function UploadDropZone({
  dragOver,
  fileInputRef,
  onDrop,
  onDragOver,
  onDragLeave,
}: UploadDropZoneProps) {
  return (
    <div
      className={`${styles.dropZone} ${dragOver ? styles.dropZoneDragOver : ''}`}
      onDrop={onDrop}
      onDragOver={onDragOver}
      onDragLeave={onDragLeave}
      onClick={() => fileInputRef.current?.click()}
      role="button"
      tabIndex={0}
    >
      <div className={styles.dropIcon}>+</div>
      <div className={styles.dropLabelDesktop}>Drag & drop files here, or click to browse</div>
      <div className={styles.dropLabelMobile}>Tap to choose files</div>
      <div className={styles.dropRequirements}>
        <span className={styles.dropRequired}>Required:</span> audio (.ogg, .mp3, .wav) + chart
        (.ssc/.sm)
      </div>
      <div className={styles.dropHint}>Optional: background (bg.png) · banner (bn.png)</div>
      <div className={styles.dropHintDesktop}>Or drop a .zip with one or more song folders</div>
    </div>
  )
}
