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

import { Card } from './Card';

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

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

export const Default: Story = {
  args: {
    children: 'Card content',
    border: true,
  },
  parameters: {
    docs: {
      description: {
        story: `
If you are migrating from the older version of the design system, 
please note that the \`Card\` component has undergone some breaking changes. 
The \`title\` and \`footer\` props have been removed. Instead, you should use the new subcomponents: \`Card.Header\`, \`Card.Title\`, \`Card.Content\`, and \`Card.Footer\`.

Before:
\`\`\`tsx
<Card title="Card title" footer="Card footer" border>
  Card content
</Card>
\`\`\`

After:
\`\`\`tsx
<Card border>
  <Card.Header>
    <Card.Title>Card title</Card.Title>
  </Card.Header>
  <Card.Content>Card content</Card.Content>
  <Card.Footer>Card footer</Card.Footer>
</Card>
\`\`\`
        `,
      },
    },
  },
  render: args => (
    <Card {...args}>
      <Card.Header>
        <Card.Title>Card title</Card.Title>
      </Card.Header>
      <Card.Content>Card content</Card.Content>
      <Card.Footer>Card footer</Card.Footer>
    </Card>
  ),
};