import { Meta, Story } from '@storybook/react';
import React from 'react';
import { FaPlus, FaShoppingBag, FaShoppingCart, FaTrash } from 'react-icons/fa';
import { RPGUIRoot } from '../../../components/RPGUI/RPGUIRoot';
import { CTAButton } from '../../../components/shared/CTAButton/CTAButton';

interface ICTAButtonProps {
  icon: React.ReactNode;
  label?: React.ReactNode;
  onClick?: () => void;
  fullWidth?: boolean;
  textColor?: string;
  iconColor?: string;
  disabled?: boolean;
}

const meta: Meta = {
  title: 'UI/Buttons & Inputs/CTAButton',
  component: CTAButton,
  argTypes: {
    icon: { control: false },
    label: { control: 'text' },
    fullWidth: { control: 'boolean' },
    textColor: { control: 'color' },
    iconColor: { control: 'color' },
    disabled: { control: 'boolean' },
  },
  decorators: [
    Story => (
      <RPGUIRoot>
        <div style={{ padding: '2rem', background: '#333' }}>
          <Story />
        </div>
      </RPGUIRoot>
    ),
  ],
};

export default meta;

const Template: Story<ICTAButtonProps> = args => <CTAButton {...args} />;

export const CartButton = Template.bind({});
CartButton.args = {
  icon: <FaShoppingCart />,
  label: '3',
};

export const DeleteButton = Template.bind({});
DeleteButton.args = {
  icon: <FaTrash />,
  textColor: '#ef4444',
  iconColor: '#ef4444',
};

export const AddButton = Template.bind({});
AddButton.args = {
  icon: <FaPlus />,
  label: 'Add Item',
  textColor: '#22c55e',
  iconColor: '#22c55e',
};

export const CheckoutButton = Template.bind({});
CheckoutButton.args = {
  icon: <FaShoppingBag />,
  label: 'Complete Purchase',
  fullWidth: true,
};

export const DisabledCheckoutButton = Template.bind({});
DisabledCheckoutButton.args = {
  icon: <FaShoppingBag />,
  label: 'Complete Purchase',
  fullWidth: true,
  disabled: true,
};
