import React from 'react';
import type { Meta, StoryObj } from '@storybook/react-vite';

import { generateSvgPlaceholder } from '../../../utils/storybook';
import { Button } from '../../Button/Button';

import { LandingPageSection } from './LandingPageSection';

const meta: Meta<typeof LandingPageSection> = {
  title: 'UI kit/LandingPage/LandingPageSection',
  component: LandingPageSection,
  tags: ['autodocs'],
};

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

const title = 'Landing Content Title';
const description = 'This is a description for the landing content. It can be a simple string or any React node.';
const image = generateSvgPlaceholder(600, 200);

const ContentChildren = () => (
  <div style={{ textAlign: 'center' }}>
    <strong>Here is some custom content!</strong>
  </div>
);

const action1: React.ReactElement = (
  <Button key='continue' variant='primary'>
    Continue
  </Button>
);

const action2: React.ReactElement = (
  <Button key='learn-more' variant='secondary'>
    Learn More
  </Button>
);

export const Default: Story = {
  args: {
    title,
    description,
    children: <ContentChildren />,
    image,
    actions: [action1, action2],
    maxWidth: 'fit',
  },
};

export const TitleOnly: Story = {
  args: {
    title,
  },
};

export const WithDescription: Story = {
  args: {
    title,
    description,
  },
};

export const WithImage: Story = {
  args: {
    title,
    image: generateSvgPlaceholder(600, 200),
  },
};

export const WithImageMaxWidthFit: Story = {
  name: 'With Image (maxWidth fit)',
  args: {
    title,
    image: generateSvgPlaceholder(600, 200),
    maxWidth: 'fit',
  },
};

export const WithActions: Story = {
  name: 'With Actions (array)',
  args: {
    title,
    actions: [action1, action2],
  },
};

export const WithActionsSingle: Story = {
  name: 'With Actions (1 action)',
  args: {
    title,
    actions: action1,
  },
};

export const WithChildren: Story = {
  args: {
    title,
    children: <ContentChildren />,
  },
};