import type { Meta, StoryObj } from "@storybook/react";

import { Button } from "@/components/ui/button/button";
import LIcon from "@/components/ui/lucid-icon/lucid-icon";
import { ThemeProviderDecorators } from "@/storybook/Decorator";

import {
  AdditionalServicesCard,
  AdditionalServicesTitle,
  AdditionalServicesWrapper,
} from "./additional-services";

const meta = {
  title: "Widgets/AdditionalServices",
  component: AdditionalServicesWrapper,
  tags: ["autodocs"],
  decorators: ThemeProviderDecorators,
} satisfies Meta<typeof AdditionalServicesWrapper>;

export default meta;

type Story = StoryObj<typeof AdditionalServicesWrapper>;

export const AdditionalServices: Story = {
  render: () => {
    return (
      <div className="min-w-[688px]">
        <AdditionalServicesWrapper>
          <AdditionalServicesTitle title="Ek Hizmetler" />
          {Array.from(Array(3), (_, index) => (
            <AdditionalServicesCard
              key={index}
              title="Lorem Ipsum"
              price="Kişi Başı: 300 TL"
            >
              <Button variant="outline-primary" size="sm">
                <LIcon name="Plus" className="mr-1 w-[20px]" /> Ekle
              </Button>
            </AdditionalServicesCard>
          ))}
        </AdditionalServicesWrapper>
      </div>
    );
  },
};