import React from "react";
import { Meta, StoryFn } from "@storybook/react";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "./Select";

import { BookmarkIcon } from "../../../icons";

export default {
  title: "Atoms/Select",
  component: Select,
} as Meta;

const Template: StoryFn = (args) => (
  <Select {...args}>
    <SelectTrigger className="w-[180px]">
      <SelectValue placeholder="Theme" />
    </SelectTrigger>
    <SelectContent>
      <SelectItem value="light">
        <div className="flex gap-1 items-center">
          <BookmarkIcon /> Light
        </div>
      </SelectItem>
      <SelectItem value="dark">Dark</SelectItem>
      <SelectItem value="system">System</SelectItem>
    </SelectContent>
  </Select>
);

export const Default = Template.bind({});

Default.args = {};
