import React, { useState } from "react";
import { Meta, StoryObj } from "@storybook/react";
import { DatePicker } from "../ui/date-picker";

/**
 * 1) Meta configuration for Storybook
 * 2) Title: Where in Storybook’s sidebar this story will appear
 * 3) component: the component under test
 */
const meta: Meta<typeof DatePicker> = {
  title: "Components/DatePicker",
  component: DatePicker,
  // Optional: Add tags, parameters, or argTypes if needed
};

export default meta;
type Story = StoryObj<typeof DatePicker>;

/**
 * A default story demonstrating how to use the DatePicker with local state.
 */
export const Default: Story = {
  render: () => {
    const [date, setDate] = useState<Date | null>(null);

    return (
      <div style={{ padding: "1rem" }}>
        <DatePicker
          date={date}
          setDate={(newDate: Date) => {
            setDate(newDate);
            console.log("Date selected:", newDate);
          }}
        />
      </div>
    );
  },
};