"use client";

import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import { CalendarDays, List } from "lucide-react";

export type CalendarView = "month" | "list";

interface CalendarViewSwitcherProps {
  currentView: CalendarView;
  onViewChange: (view: CalendarView) => void;
}

const views: { value: CalendarView; label: string; icon: typeof CalendarDays }[] = [
  { value: "month", label: "Month", icon: CalendarDays },
  { value: "list", label: "List", icon: List },
];

export function CalendarViewSwitcher({
  currentView,
  onViewChange,
}: CalendarViewSwitcherProps) {
  return (
    <div className="flex items-center gap-1 bg-muted p-1 rounded-lg">
      {views.map((view) => {
        const Icon = view.icon;
        return (
          <Button
            key={view.value}
            variant="ghost"
            size="sm"
            onClick={() => onViewChange(view.value)}
            className={cn(
              "gap-2",
              currentView === view.value && "bg-background shadow-sm"
            )}
          >
            <Icon className="w-4 h-4" />
            <span className="hidden sm:inline">{view.label}</span>
          </Button>
        );
      })}
    </div>
  );
}