import { Box, Flex, FlexProps, HStack } from '@chakra-ui/react';

const Color = ({ children, ...rest }: FlexProps) => (
  <Flex flex="1" h="16" p="2" {...rest}>
    <Box
      bg="white"
      display="inline-block"
      px="2"
      py="1"
      m="auto"
      fontSize="xs"
      fontWeight="bold"
      borderRadius="md"
    >
      {children}
    </Box>
  </Flex>
);

const Colors = ({ colorScheme = 'gray', ...rest }) => (
  <HStack
    spacing="0"
    overflow="hidden"
    boxShadow="lg"
    color={`${colorScheme}.700`}
    borderRadius="md"
    {...rest}
  >
    <Color bg={`${colorScheme}.50`}>50</Color>
    <Color bg={`${colorScheme}.100`}>100</Color>
    <Color bg={`${colorScheme}.200`}>200</Color>
    <Color bg={`${colorScheme}.300`}>300</Color>
    <Color bg={`${colorScheme}.400`}>400</Color>
    <Color bg={`${colorScheme}.500`}>500</Color>
    <Color bg={`${colorScheme}.600`}>600</Color>
    <Color bg={`${colorScheme}.700`}>700</Color>
    <Color bg={`${colorScheme}.800`}>800</Color>
    <Color bg={`${colorScheme}.900`}>900</Color>
  </HStack>
);

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

export default meta;

export const Brand = {
  render: () => <Colors colorScheme="brand" />,
};

export const Gray = {
  render: () => <Colors colorScheme="gray" />,
};

export const Error = {
  render: () => <Colors colorScheme="error" />,
};

export const Warning = {
  render: () => <Colors colorScheme="warning" />,
};

export const Success = {
  render: () => <Colors colorScheme="success" />,
};
