import { type FC } from 'react';

import { Stack, Typography } from '@mui/material';

import { type CategoryProps } from './types';

const Category: FC<CategoryProps> = ({ label, Icon, selected, onClick }) => {
  return (
    <Stack
      sx={{
        flexDirection: 'row',
        alignItems: 'center',
        gap: 1,
        p: 2,
        borderRadius: 2,
        cursor: 'pointer',
        backgroundColor: ({ palette }) =>
          selected
            ? palette.new.background.layout.default
            : palette.new.background.layout.tertiary,
        '&:hover': {
          backgroundColor: ({ palette }) =>
            palette.new.background.layout.default,
        },
      }}
      onClick={onClick}
    >
      <Icon
        height={24}
        width={24}
        style={{ flexShrink: 0 }}
      />
      <Typography
        variant="globalXS"
        fontWeight="fontWeightSemiBold"
        noWrap
        sx={{
          color: ({ palette }) =>
            selected
              ? palette.new.text.neutral.default
              : palette.new.text.neutral.lighter,
        }}
      >
        {label}
      </Typography>
    </Stack>
  );
};

export default Category;