import React from 'react';
import { useTheme } from 'styled-components';
import { Typography } from '..';
import AnimatedFavoriteIcon from '../../icons/AnimatedFavoriteIcon';
import { MobileTapArea, RoundButton } from './styles';

type FavoriteButtonProps = {
  active: boolean;
  disabled?: boolean;
  onClick?: React.MouseEventHandler<HTMLButtonElement>;
  top?: number;
  right?: number;
  size?: 'default' | 'small';
  favoriteCount?: null | number;
};

const FavoriteButton = ({
  active,
  onClick,
  top = 0,
  right = 0,
  disabled,
  size = 'default',
  favoriteCount = null,
}: FavoriteButtonProps) => {
  const theme = useTheme();
  const hasCount = Boolean(favoriteCount);

  return (
    <>
      <MobileTapArea onClick={onClick} top={top} right={right} />
      <RoundButton
        active={active}
        onClick={onClick}
        top={top}
        right={right}
        disabled={disabled}
        size={size}
        hasCount={hasCount}
      >
        <AnimatedFavoriteIcon
          active={active}
          color={active ? theme.colors.neutral[0] : theme.colors.neutral[600]}
          variant="light"
        />
        {hasCount && (
          <Typography
            variant={'utility1'}
            fontSize={size == 'default' ? 18 : 16}
            color={active ? theme.colors.neutral[0] : theme.colors.neutral[600]}
            fontWeight={400}
            margin={[0, 4, 0, 0]}
          >
            {favoriteCount}
          </Typography>
        )}
      </RoundButton>
    </>
  );
};

export default FavoriteButton;