import { argsToTemplate, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
import { CardComponent, CardImageDirective } from '../../public-api';

const meta: Meta<CardComponent> = {
  title: 'Components/Card',
  id: 'card',
  component: CardComponent,
  decorators: [
    moduleMetadata({
      imports: [CardImageDirective]
    })
  ],
  parameters: {
    docs: {
      imports: [CardComponent, CardImageDirective]
    }
  }
};

export default meta;

type CardWithTitleAndContent = CardComponent & { title?: string; content?: string };
type Story = StoryObj<CardWithTitleAndContent>;

export const Card: Story = {
  args: {
    title: 'Title',
    content: 'This is the card content'
  },
  render: (args) => ({
    props: args,
    template: `
    <nj-card ${argsToTemplate(args, { exclude: ['title', 'content'] })} style="max-width: 550px; margin: 0 auto">
        <img src="https://design.engie.com/assets/img/img-generic.jpg" alt="" njCardImage>
        <p njCardTitle>{{title}}</p>
        <p>{{content}}</p>
    </nj-card>
  `
  })
};