import { Button, ButtonGroup, IconButton, VStack } from '@chakra-ui/react';
import { HiMinus, HiPlus } from 'react-icons/hi';

const meta = {
  title: 'StyleGuide/Buttons',
};

export default meta;

export const Default = {
  render: () => (
    <ButtonGroup>
      <Button>Default Button</Button>
      <Button isLoading>Button</Button>
      <IconButton icon={<HiPlus />} aria-label="Add" />
    </ButtonGroup>
  ),
};

export const Primary = {
  render: () => (
    <ButtonGroup>
      <Button variant="@primary">Primary Button</Button>
      <Button variant="@primary" isLoading>
        Button
      </Button>
      <IconButton variant="@primary" icon={<HiPlus />} aria-label="Add" />
    </ButtonGroup>
  ),
};

export const Secondary = {
  render: () => (
    <ButtonGroup>
      <Button variant="@secondary">Secondary Button</Button>
      <Button variant="@secondary" isLoading>
        Button
      </Button>
      <IconButton variant="@secondary" icon={<HiPlus />} aria-label="Add" />
    </ButtonGroup>
  ),
};

export const Danger = {
  render: () => (
    <ButtonGroup>
      <Button variant="@danger">Danger Button</Button>
      <Button variant="@danger" isLoading>
        Button
      </Button>
      <IconButton variant="@danger" icon={<HiMinus />} aria-label="Remove" />
    </ButtonGroup>
  ),
};

export const Progress = {
  render: () => (
    <ButtonGroup>
      <VStack>
        <Button variant="@progress" colorScheme="brand">
          Progress Button with Brand ColorScheme
        </Button>
        <Button variant="@progress" colorScheme="error">
          Progress Button with Error ColorScheme
        </Button>
        <Button variant="@progress" isLoading>
          Button
        </Button>
        <IconButton
          variant="@progress"
          icon={<HiMinus />}
          aria-label="Remove"
        />
      </VStack>
    </ButtonGroup>
  ),
};
