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

export default {
  title: 'Components / Badges / Condition Badge',
  component: ConditionBadge,
};

const Template: Story<ConditionBadgeProps> = (args) => (
  <Card
    badge={<ConditionBadge {...args} />}
    description="This is a description of the product"
    title="Product Title"
    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"
      />
    }
  />
);

export const NewInBox = Template.bind({});
NewInBox.args = {
  condition: 'nib',
};

export const OpenBoxItem = Template.bind({});
OpenBoxItem.args = {
  condition: 'obi',
};
export const LikeNew = Template.bind({});
LikeNew.args = {
  condition: 'likeNew',
};

export const Good = Template.bind({});
Good.args = {
  condition: 'good',
};

export const Fair = Template.bind({});
Fair.args = {
  condition: 'fair',
};

export const Imperfect = Template.bind({});
Imperfect.args = {
  condition: 'imperfect',
};

export const Direction = Template.bind({});
Direction.args = {
  condition: 'likeNew',
  direction: 'right',
};