import type { Meta, StoryObj } from '@storybook/react';

import { MobileIcon } from '@/icons';

import { GlassBanner } from './GlassBanner';

type GlassBannerProps = React.ComponentProps<typeof GlassBanner>;

const meta: Meta<GlassBannerProps> = {
  title: 'components/GlassBanner',
  component: GlassBanner,
  parameters: {
    layout: 'centered',
  },
  tags: ['autodocs'],
};

export default meta;
type Story = StoryObj<GlassBannerProps>;

export const Default: Story = {
  args: {
    children: (
      <div className='p-2 text-white'>Default glass banner content</div>
    ),
  },
};

export const WithCustomBackground: Story = {
  args: {
    className: 'bg-white/40',
    children: <div className='p-2 text-white'>Custom background opacity</div>,
  },
};

export const YellowWarning: Story = {
  args: {
    className: 'bg-yellow-700/50',
    children: (
      <div className='flex flex-row items-center gap-3 text-white'>
        <MobileIcon width={36} height={36} />
        <div className='flex flex-col'>
          <span className='leading-none font-bold'>
            You are a mobile subscriber.
          </span>
          <span>
            In order to upgrade your plan or change your billing information,
            please use the mobile app.
          </span>
        </div>
      </div>
    ),
  },
};

export const RedAlert: Story = {
  args: {
    className: 'bg-red-700/50',
    children: (
      <div className='flex flex-col text-white'>
        <div className='text-lg font-bold'>Your subscription is past due</div>
        <p>Please update your payment information to continue your service.</p>
      </div>
    ),
  },
};