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

import AnimatedLogo from './AnimatedLogo';
import Logo from './Logo';

type PagePropsAndCustomArgs = {
  className?: string;
  isVip?: boolean;
  // Custom Storybook controls
  width?: number;
  height?: number;
};

const meta: Meta<PagePropsAndCustomArgs> = {
  title: 'system/Logo',
  component: Logo,
  argTypes: {
    className: {
      control: 'text',
    },
    isVip: {
      control: 'boolean',
    },
    width: {
      control: 'number',
    },
    height: {
      control: 'number',
    },
  },
};

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

export const Default: Story = {
  render: ({ width, height, ...restProps }) => (
    <Logo style={{ width, height }} {...restProps} />
  ),
};

export const Vip: Story = {
  render: ({ width, height, ...restProps }) => (
    <Logo style={{ width, height }} isVip {...restProps} />
  ),
};

export const Animated: Story = {
  render: ({ width, height, ...restProps }) => (
    <AnimatedLogo
      className='h-26 w-26 text-white'
      delay={10000}
      {...restProps}
    />
  ),
};