import type { Meta, StoryObj } from '@storybook/html';
import '@42/styles/card.css';

interface CardArgs {
  header: string;
  body: string;
  footer: string;
}

const meta: Meta<CardArgs> = {
  title: 'Presentational/Card',
  tags: ['autodocs'],
  argTypes: {
    header: { control: 'text' },
    body: { control: 'text' },
    footer: { control: 'text' },
  },
  args: {
    header: 'Card title',
    body: 'Headless components ship behaviour; the card is pure presentation.',
    footer: 'Footer',
  },
  render: ({ header, body, footer }) => {
    const card = document.createElement('div');
    card.className = 'c42-card';
    card.style.maxWidth = '24rem';
    card.innerHTML = `
      <div class="c42-card-header">${header}</div>
      <div class="c42-card-body">${body}</div>
      <div class="c42-card-footer">${footer}</div>`;
    return card;
  },
};

export default meta;

type Story = StoryObj<CardArgs>;

export const Default: Story = {};