import { Meta, StoryObj } from "@storybook/nextjs-vite";
import SoulmatePortraitsDelivered from "./SoulmatePortraitsDelivered";
import Typography from "@/components/ui/Typography/Typography";

/** Reusable SoulmatePortraitsDelivered Component */
const meta: Meta<typeof SoulmatePortraitsDelivered> = {
  title: "Widgets/SoulmatePortraitsDelivered",
  component: SoulmatePortraitsDelivered,
  tags: ["autodocs"],
  args: {
    image: "/soulmate-portrait-delivered-male.jpg",
    textProps: {
      children: "soulmate portraits delivered today",
    },
    avatarsProps: {
      avatars: [
        {
          imageProps: {
            src: "/avatars/male-1.jpg",
            alt: "Male 1",
          },
          fallbackProps: {
            children: "M1",
          },
        },
        {
          imageProps: {
            src: "/avatars/male-2.jpg",
            alt: "Male 2",
          },
          fallbackProps: {
            children: "M2",
          },
        },
        {
          imageProps: {
            src: "/avatars/male-3.jpg",
            alt: "Male 3",
          },
          fallbackProps: {
            children: "M3",
          },
        },
        {
          fallbackProps: {
            children: (
              <Typography size="xs" weight="bold" className="text-[#FF6B9D]">
                900+
              </Typography>
            ),
            className: "bg-background",
          },
          className: "w-fit px-1",
        },
      ],
    },
  },
  argTypes: {},
};

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

export const Default = {} satisfies Story;
