// import { HeartOffIcon, HomeIcon, Settings2Icon } from '@loft/react-icons';
// import { Flex, Typography } from '@loft/react-loft';
// import { flex } from '@loft/tokens-loft';

() => {
  const containerClassName = css({
    width: '100%',
  })().className;
  
  const itemClassName = css({
    ...flex.column.alignCenter,
    minWidth: 80,
    flex: 1,
  })().className;

  const BottomNavigation = (
    <Flex className={containerClassName} centered>
      <a href="https://loft.com.br" className={itemClassName}>
        <HomeIcon />
        <Typography as="span" textStyle="label-sm">
          Home
        </Typography>
      </a>
      <a href="https://loft.com.br" className={itemClassName}>
        <HeartOffIcon color={color.icon.highlight} />
        <Typography as="span" textStyle="label-sm" modifier="highlight">
          Favoritos
        </Typography>
      </a>
      <a href="https://loft.com.br" className={itemClassName}>
        <Settings2Icon />
        <Typography as="span" textStyle="label-sm">
          Ajustes
        </Typography>
      </a>
    </Flex>
  );

  return (
    <div style={{ width: 420, margin: '0 auto' }}>
      {BottomNavigation}
    </div>
  );
}