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

import { ThemeProviderDecorators } from "@/storybook/Decorator";

import { Carousel } from "./carousel";

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

export default meta;

type Story = StoryObj<typeof Carousel>;

export const DefaultSlider: Story = {
  render: () => {
    return (
      <Carousel wrapperClassName="w-1/2 mx-5" className="h-[500px]">
        <Image
          width={1000}
          height={500}
          src="https://images.pexels.com/photos/12823580/pexels-photo-12823580.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
          alt=""
          className="p-5"
        />
        <Image
          width={1000}
          height={500}
          src="https://images.pexels.com/photos/314937/pexels-photo-314937.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
          alt=""
          className="p-5"
        />
        <Image
          width={1000}
          height={500}
          src="https://images.pexels.com/photos/161097/allgau-eisenberg-ostallgau-bavaria-161097.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
          alt=""
          className="p-5"
        />
        <Image
          width={1000}
          height={500}
          src="https://images.pexels.com/photos/434334/pexels-photo-434334.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
          alt=""
          className="p-5"
        />
        <Image
          width={1000}
          height={500}
          src="https://images.pexels.com/photos/325944/pexels-photo-325944.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
          alt=""
          className="p-5"
        />
      </Carousel>
    );
  },
};

export const SliderOutNavigation: Story = {
  render: () => {
    return (
      <Carousel
        navigationState="out"
        wrapperClassName="w-1/2 mx-5"
        className="h-[500px]"
      >
        <Image
          width={1000}
          height={500}
          src="https://images.pexels.com/photos/12823580/pexels-photo-12823580.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
          alt=""
          className="p-5"
        />
        <Image
          width={1000}
          height={500}
          src="https://images.pexels.com/photos/314937/pexels-photo-314937.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
          alt=""
          className="p-5"
        />
        <Image
          width={1000}
          height={500}
          src="https://images.pexels.com/photos/161097/allgau-eisenberg-ostallgau-bavaria-161097.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
          alt=""
          className="p-5"
        />
        <Image
          width={1000}
          height={500}
          src="https://images.pexels.com/photos/434334/pexels-photo-434334.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
          alt=""
          className="p-5"
        />
        <Image
          width={1000}
          height={500}
          src="https://images.pexels.com/photos/325944/pexels-photo-325944.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
          alt=""
          className="p-5"
        />
      </Carousel>
    );
  },
};