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

import { generateSvgPlaceholder, predefinedArgTypes } from '../../utils/storybook';
import { Grid } from '../Grid/Grid';

import type { ReviewCardOwnPropsWithoutChildren } from './ReviewCard';
import { ReviewCard } from './ReviewCard';

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

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

const args = {
  title: 'Review title',
  content: predefinedArgTypes.string.mapping['"Lorem ipsum" (L)'],
  description: 'React Developer',
  name: 'Jane Doe',
  src: generateSvgPlaceholder(200, 200),
} as const;

export const Default: Story = {
  args,
};

/**
 * In case the content of multiple ReviewCards should have the same height
 * when displayed in a grid/stack layout, the body container stretches to
 * accommodate the tallest content.
 */
export const MatchHeights: Story = {
  args,
  render: args => {
    return (
      <Grid gap columns={3}>
        <ReviewCard {...args} content={predefinedArgTypes.string.mapping['"Lorem ipsum"']} />
        <ReviewCard {...args} content={predefinedArgTypes.string.mapping['"Lorem ipsum" (M)']} />
        <ReviewCard {...args} />
      </Grid>
    );
  },
};

/**
 * To use different element than H2 you can use the `as` prop, e.g. to render the header with H4.
 * It requires you to compose the sub-components of the ReviewCard manually.
 */
export const AsH4: Story = {
  args,
  render: args => {
    const { title, content, description, lazy, name, src, srcSet, ...rest } = args as ReviewCardOwnPropsWithoutChildren;

    return (
      <ReviewCard {...rest}>
        <ReviewCard.Header as='h4'>{title}</ReviewCard.Header>
        <ReviewCard.Content>{content}</ReviewCard.Content>
        <ReviewCard.Footer description={description} lazy={lazy} name={name} src={src} srcSet={srcSet} />
      </ReviewCard>
    );
  },
};
AsH4.storyName = 'Renders as H4';