DatePicker

import { DatePicker } from "@/components/ui/DatePicker";

export const DefaultDatePickerExample = () => {
  const [selectedDate, setSelectedDate] = React.useState<Date | null>(null);

  return (
    <DatePicker
      value={selectedDate}
      onChange={setSelectedDate}
      placeholder="Select appointment date"
    />
  );
};

import { DatePicker } from "@/components/ui/DatePicker";

export const DateTimePickerExample = () => {
  const [selectedDateTime, setSelectedDateTime] = React.useState<Date | null>(null);

  return (
    <DatePicker
      value={selectedDateTime}
      onChange={setSelectedDateTime}
      includeTime
      placeholder="Schedule meeting"
      minDate={new Date()}
    />
  );
};

import { DatePicker } from "@/components/ui/DatePicker";

export const BusinessDatePickerExample = () => {
  const [eventDate, setEventDate] = React.useState<Date | null>(null);

  const holidays = [
    { year: 2025, month: 1, day: 1 },
    { year: 2025, month: 8, day: 15 },
    { year: 2025, month: 12, day: 25 },
  ];

  const specialDays = [
    {
      date: { year: 2025, month: 9, day: 15 },
      className: "bg-chart-2/20 text-chart-2 hover:bg-chart-2/30",
      label: "Product Launch",
    },
    {
      date: { year: 2025, month: 10, day: 31 },
      className: "bg-chart-4/20 text-chart-4 hover:bg-chart-4/30",
      label: "Quarterly Review",
    },
  ];


  return (
    <div className="w-full max-w-sm space-y-3">
        <DatePicker
          value={eventDate}
          onChange={setEventDate}
          minDate={new Date()}
          holidays={holidays}
          specialDays={specialDays}
          disableWeekends
          disableHolidays
          placeholder="Select business event date"
        />
        <div className="text-xs text-muted-foreground space-y-1 px-1">
          <div className="flex items-center gap-2">
            <div className="w-3 h-3 bg-destructive/20 rounded"></div>
            <span>Holidays (New Year, Independence Day, Christmas)</span>
          </div>
          <div className="flex items-center gap-2">
            <div className="w-3 h-3 bg-chart-2/20 rounded"></div>
            <span>Product Launch (Sep 15)</span>
          </div>
          <div className="flex items-center gap-2">
            <div className="w-3 h-3 bg-chart-4/20 rounded"></div>
            <span>Quarterly Review (Oct 31)</span>
          </div>
          <div className="text-muted-foreground/80">
            • Weekends disabled • Holidays disabled
          </div>
        </div>
      </div>
  );
};