import { Story } from '@storybook/react';
import React from 'react';
import Card, { CardTypes } from '../components/Card/Card';
import Badge from '../components/Badges/Badge';
import ConditionBadge from '../components/Badges/ConditionBadge';

const meta = {
  title: 'Components / Card',
  component: Card,
  parameters: {
    controls: { expanded: true },
  },
};

export default meta;

const Template: Story<CardTypes> = (args) => <Card {...args} />;

export const Default = Template.bind({});
Default.args = {
  footerCopy: 'Im a footer',
  headerCopy: 'Im a header',
  leftContent: (
    <img
      alt="Some alt text"
      src="https://res.cloudinary.com/enspire-commerce/image/upload/h_400,w_400,c_thumb,/v1649853701/b73264e717575c517a973a1eadcbfa51.jpg"
      className="rounded-md h-40 w-40 m-auto mr-3"
    />
  ),
  title: 'The Title',
  description: 'This is my description',
};

export const WithBadge = Template.bind({});
WithBadge.args = {
  badge: (
    <Badge
      variant="custom"
      icon="fa-light fa-starship-freighter"
      title="My Custom Badge"
      theme="bg-_-primary-700 border-_-primary-900 text-_-primary-200"
    />
  ),
  leftContent: (
    <img
      alt="Some alt text"
      src="https://res.cloudinary.com/enspire-commerce/image/upload/h_400,w_400,c_thumb,/v1649853701/b73264e717575c517a973a1eadcbfa51.jpg"
      className="rounded-md h-40 w-40 m-auto mr-3"
    />
  ),
  title: 'With Badge',
};

export const WithConditionBadge = Template.bind({});
WithConditionBadge.args = {
  badge: <ConditionBadge condition="nib" />,
  leftContent: (
    <img
      alt="Some alt text"
      src="https://res.cloudinary.com/enspire-commerce/image/upload/h_400,w_400,c_thumb,/v1649853701/b73264e717575c517a973a1eadcbfa51.jpg"
      className="rounded-md h-40 w-40 m-auto mr-3"
    />
  ),
  title: 'With Badge',
};