import { ReactNode } from 'react';

import { Center, Flex, FlexProps, Text } from '@chakra-ui/react';

import { useColorModeValue } from '@/components/ui/color-mode';

export type VignetteProps = { text?: String; icon: ReactNode } & Pick<
  FlexProps,
  'onClick'
>;
export const Vignette = ({ icon, text, ...rest }: VignetteProps) => {
  return (
    <Flex
      align="flex-start"
      width="200px"
      height="190px"
      border="1px"
      borderColor="brand.900"
      backgroundColor={useColorModeValue('#FFFFFF88', '#00000088')}
      padding="5px"
      as="button"
      _hover={{
        boxShadow: 'outline-over',
        bgColor: useColorModeValue('#FFFFFFF7', '#000000F7'),
      }}
      {...rest}
    >
      <Flex direction="column" width="full" height="full">
        <Center height="full">{icon}</Center>
        <Center>
          <Text
            fontSize="25px"
            fontWeight="bold"
            textTransform="uppercase"
            userSelect="none"
          >
            {text}
          </Text>
        </Center>
      </Flex>
    </Flex>
  );
};
