local-cal/src/components/drag-drop-container.tsx

import { ReactNode } from 'react'
import { toast } from 'sonner'

interface DragDropContainerProps {
  children: ReactNode
  isDragOver: boolean
  setIsDragOver: (isDragOver: boolean) => void
  onImport: (file: File) => void
}

export const DragDropContainer = ({
  children,
  isDragOver,
  setIsDragOver,
  onImport
}: DragDropContainerProps) => {
  const handleDragOver = (e: React.DragEvent) => {
    e.preventDefault()
    setIsDragOver(true)
  }

  const handleDragLeave = (e: React.DragEvent) => {
    e.preventDefault()
    setIsDragOver(false)
  }

  const handleDrop = (e: React.DragEvent) => {
    e.preventDefault()
    setIsDragOver(false)
    if (e.dataTransfer.files?.length) {
      const file = e.dataTransfer.files[0]
      if (file.name.endsWith('.ics')) {
        onImport(file)
      } else {
        toast.warning('Please drop an .ics file')
      }
    }
  }

  return (
    <div 
      onDragOver={handleDragOver} 
      onDragLeave={handleDragLeave} 
      onDrop={handleDrop}
      className={`p-4 min-h-[80vh] flex flex-col rounded border-2 border-dashed transition ${
        isDragOver ? 'border-blue-500 bg-blue-50' : 'border-gray-700'
      }`}
    >
      {children}
      <div className='mt-auto w-full pb-4 text-gray-400'>
        <div className='max-w-fit m-auto'>Drag & Drop *.ics here</div>
      </div>
    </div>
  )
}