import Button, { ButtonSize, ButtonVariant } from '@/components/button/Button';

import { UpsellCard } from './UpsellCard';

export default {
  title: 'components/UpsellCard',
  component: UpsellCard,
};

export const Default = () => {
  return (
    <div className='w-[400px]'>
      <UpsellCard
        title='Upgrade to Pro'
        description='Get access to all premium features and unlimited generations'
        button={
          <Button variant={ButtonVariant.Primary} size={ButtonSize.Medium}>
            Upgrade Now
          </Button>
        }
      />
    </div>
  );
};

export const WithCustomClassName = () => {
  return (
    <div className='w-[400px]'>
      <UpsellCard
        className='bg-linear-to-r from-accent-purple to-accent-pink'
        title='Special Offer'
        description='Limited time offer: 50% off your first month'
        button={
          <Button variant={ButtonVariant.Secondary} size={ButtonSize.Medium}>
            Claim Offer
          </Button>
        }
      />
    </div>
  );
};