"use client"

import type React from "react"

import { useRef } from "react"
import { Button } from "@/components/ui/button"
import { Calendar } from "lucide-react"

interface IcsFilePickerProps {
  onFileSelect?: (file: File) => void
  className?: string
  children?: React.ReactNode
  variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link"
  size?: "default" | "sm" | "lg" | "icon"
}

export function IcsFilePicker({
  onFileSelect,
  className,
  children,
  variant = "default",
  size = "default",
}: IcsFilePickerProps) {
  const fileInputRef = useRef<HTMLInputElement>(null)

  const handleButtonClick = () => {
    fileInputRef.current?.click()
  }

  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0]
    if (file && onFileSelect) {
      onFileSelect(file)
    }
  }

  return (
    <>
      <input
        ref={fileInputRef}
        type="file"
        accept=".ics"
        onChange={handleFileChange}
        className="hidden"
        aria-hidden="true"
      />
      <Button onClick={handleButtonClick} variant={variant} size={size} className={className}>
        {children || (
          <>
            <Calendar className="mr-2 h-4 w-4" />
            Import Calendar
          </>
        )}
      </Button>
    </>
  )
}