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

/** Reusable SoulmatePortrait page Component */
const meta: Meta<typeof SoulmatePortrait> = {
  title: "Templates/SoulmatePortrait",
  component: SoulmatePortrait,
  tags: ["autodocs"],
  parameters: {
    layout: "fullscreen",
  },
  args: {
    bottomActionButtonProps: {
      actionButtonProps: {
        children: "Continue",
        onClick: fn(),
      },
    },
    privacyTermsConsentProps: {
      privacyPolicy: {
        children: "Privacy Policy",
        href: "#privacy-policy",
      },
      termsOfUse: {
        children: "Terms of use",
        href: "#terms-of-use",
      },
    },
    title: {
      children: "Soulmate Portrait",
    },
    subtitle: {
      children: "Готов увидеть, кто твоя настоящая Родственная душа?",
    },
    textListProps: {
      items: [
        {
          children:
            "Всего 2 минуты — и Портрет откроет того, кто связан с тобой судьбой.",
        },
        {
          children: "Поразительная точность 99%.",
        },
        {
          children: "Тебя ждёт неожиданное открытие.",
        },
        {
          children: "Осталось лишь осмелиться взглянуть.",
        },
      ],
    },
    soulmatePortraitsDeliveredProps: {
      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;