// Mockup https://www.figma.com/design/zsq2ahat30acTnumyy9aqC/00.Small-System?node-id=1235-8660&m=dev
import { html, nothing } from "lit";

import type { Meta, StoryObj } from "@storybook/web-components";

import "@components/forms/ui/tems-datepicker-item";

import {
  TemsDatepicker,
  type TemsDatepickerProps,
} from "@components/forms/tems-datepicker";

const meta: Meta<TemsDatepickerProps> = {
  title: "components/forms/tems-datepicker",
  tags: ["autodocs", "!dev", "Molecules"],
  render: (args) => {
    new TemsDatepicker();

    return html`<tems-datepicker
      .value=${args.value ? new Date(args.value) : nothing}
    ></tems-datepicker>`;
  },
  args: {
    value: undefined,
  },
  argTypes: {
    value: { control: "date" },
  },
};

export default meta;

export type TemsDatepickerStory = StoryObj<TemsDatepickerProps>;

export const Default: TemsDatepickerStory = {};