import React, { FC } from 'react';
import { styled } from '~/styles';
import { theme } from '~/styles/theme';
import { Flex } from '../Flex';
import { Link } from '../Link';
import { LinkButton } from '../LinkButton';
import { Icon } from '../Icon';
import { Text } from '../Text';

export interface TabItemProps {
  id: string;
  text: string;
  icon?: React.ComponentType<React.SVGAttributes<SVGElement>>;
  url?: string;
  onClick?: (event: React.MouseEvent<HTMLElement>) => void;
  isActive?: boolean;
  separator?: boolean;
}

const ActiveText = styled<any>(Text)`
  cursor: pointer;
  white-space: nowrap;
  background-color: ${({ isActive }: { isActive: boolean }) =>
    isActive ? theme.colors.gray[4] : 'transparent'};

  &:hover {
    background-color: ${theme.colors.gray[4]};
  }
`;

const TabItem: FC<TabItemProps> = ({
  id,
  text,
  url,
  icon,
  isActive,
  separator,
  onClick,
}) => {
  const Component = url ? Link : LinkButton;

  return (
    <Flex
      id={id}
      justifyContent="center"
      alignItems="center"
      mr="8px"
      pr={separator ? '8px' : null}
      borderRight={separator ? `2px solid ${theme.colors.gray[4]}` : null}
    >
      <Component {...(url ? { href: url } : { onClick })}>
        <ActiveText
          variant="b2"
          color="gray.1"
          px="8px"
          py="8px"
          borderRadius="100px"
          isActive={isActive}
        >
          {icon && (
            <Icon
              Asset={icon}
              width={24}
              height={24}
              mr="s"
              color={isActive ? 'gray.1' : 'gray.2'}
            />
          )}
          <Text variant="b2m" color={isActive ? 'gray.1' : 'gray.2'}>
            {text}
          </Text>
        </ActiveText>
      </Component>
    </Flex>
  );
};

export default TabItem;
