import { type FC } from 'react';
import { useTranslation } from 'react-i18next';

import Stack from '@mui/material/Stack/Stack';
import useTheme from '@mui/material/styles/useTheme';
import Typography from '@mui/material/Typography/Typography';
import { IconX, type TablerIcon } from '@tabler/icons-react';

import { TagColorVariant } from './types';
import { getTagColors } from './utils';

type Props = {
  label: string;
  onDelete?: () => void;
  onClick?: () => void;
  Icon?: TablerIcon;
  variant?: TagColorVariant;
  maxWidth?: string | number;
};

const Tag: FC<Props> = ({
  onDelete,
  onClick,
  label,
  variant,
  Icon,
  maxWidth = 200,
}) => {
  const { t } = useTranslation();
  const theme = useTheme();

  const { color, backgroundColor, hoverColor } = getTagColors(
    variant ?? TagColorVariant.BRAND,
    theme,
  );

  return (
    <Stack
      onClick={onClick}
      component="span"
      sx={{
        display: 'inline-flex',
        width: 'fit-content',
        flexDirection: 'row',
        alignItems: 'center',
        gap: 0.5,
        px: 1,
        py: 0.5,
        borderRadius: ({ shape }) => shape.borderRadiusM,
        border: `1px solid ${hoverColor}`,
        backgroundColor: backgroundColor,
        cursor: onClick ? 'pointer' : 'default',
        '&:hover': {
          backgroundColor: onClick ? hoverColor : backgroundColor,
        },
        maxWidth,
      }}
    >
      {Icon && (
        <Icon
          color={color}
          size={16}
        />
      )}
      <Typography
        variant="globalXXS"
        sx={{
          color,
          whiteSpace: 'nowrap',
          fontWeight: 'fontWeightSemiBold',
          overflow: 'hidden',
          textOverflow: 'ellipsis',
        }}
      >
        {label}
      </Typography>
      {onDelete && (
        <IconX
          aria-label={t('general:delete')}
          onClick={onDelete}
          color={color}
          size={16}
          style={{
            cursor: 'pointer',
            color: color,
          }}
        />
      )}
    </Stack>
  );
};

export default Tag;
