"use client";

import { CalendarPlus, Download, FileUp, Trash2 } from "lucide-react";
import { IcsFilePicker } from "@/components/ics-file-picker";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import type { CalendarEvent } from "@/lib/types";

interface EventActionsToolbarProps {
	events: CalendarEvent[];
	onAddEvent: () => void;
	onImport: (file: File) => void;
	onExport: () => void;
	onClearAll: () => void;
}

export const EventActionsToolbar = ({
	events,
	onAddEvent,
	onImport,
	onExport,
	onClearAll,
}: EventActionsToolbarProps) => {
	return (
		<div className="flex items-center gap-2 mb-4 flex-wrap">
			<Button size="sm" onClick={onAddEvent} className="text-xs">
				<CalendarPlus className="h-3.5 w-3.5" />
				Add Event
			</Button>

			<IcsFilePicker
				onFileSelect={onImport}
				variant="outline"
				size="sm"
				className="text-xs"
			>
				<FileUp className="h-3.5 w-3.5" />
				Import
			</IcsFilePicker>

			{events.length > 0 && (
				<>
					<Button
						variant="outline"
						size="sm"
						onClick={onExport}
						className="text-xs"
					>
						<Download className="h-3.5 w-3.5" />
						Export
					</Button>
					<Button
						variant="ghost"
						size="sm"
						onClick={onClearAll}
						className="text-xs text-muted-foreground hover:text-destructive"
					>
						<Trash2 className="h-3.5 w-3.5" />
						Clear
					</Button>
				</>
			)}

			{events.length > 0 && (
				<Badge variant="secondary" className="ml-auto">
					{events.length} event{events.length !== 1 ? "s" : ""}
				</Badge>
			)}
		</div>
	);
};
