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

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

const Template: Story<BadgeProps> = (args) => (
  <>
    <Card
      badge={<Badge {...args} />}
      description="This is a description of the product"
      title="Product With a Badge"
      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"
        />
      }
    />
    <Card
      badge={<BadgeAlt {...args} />}
      description="This is a description of the product"
      title="Product With a Badge"
      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 WhileSuppliesLast = Template.bind({});
WhileSuppliesLast.args = {
  variant: 'wsl',
};

export const NearYou = Template.bind({});
NearYou.args = {
  variant: 'near',
};

export const NewArrival = Template.bind({});
NewArrival.args = {
  variant: 'newArrival',
};

export const BlackFridayDeal = Template.bind({});
BlackFridayDeal.args = {
  variant: 'blackFriday',
};

export const CyberDeal = Template.bind({});
CyberDeal.args = {
  variant: 'cyberDeal',
};

export const Discount = Template.bind({});
Discount.args = {
  variant: 'discount',
  discountPercentage: '50',
};

export const Custom = Template.bind({});
Custom.args = {
  variant: 'custom',
  icon: 'fa-regular fa-user-bounty-hunter',
  title: 'Custom Text',
  theme: 'bg-_-primary-700 border-_-primary-900 text-_-primary-200',
};