"use client";

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

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"
				name="ics-file"
				accept=".ics"
				onChange={handleFileChange}
				className="hidden"
			/>
			<Button
				onClick={handleButtonClick}
				variant={variant}
				size={size}
				className={className}
			>
				{children || (
					<>
						<Calendar className="h-4 w-4" />
						Import Calendar
					</>
				)}
			</Button>
		</>
	);
}
