import { FC } from 'react';

import { IconChevronRight, TablerIcon } from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import HuAvatar from '@material-hu/components/design-system/Avatar';
import HuCardContainer from '@material-hu/components/design-system/CardContainer';

type Props = {
  title: string;
  description: string;
  Icon: TablerIcon;
  avatarColor:
    | 'default'
    | 'primary'
    | 'highlight'
    | 'success'
    | 'error'
    | 'warning';
  onClick: () => void;
};

const NavTitleCard: FC<Props> = ({
  title,
  description,
  Icon,
  avatarColor,
  onClick,
}) => {
  return (
    <HuCardContainer
      onClick={onClick}
      fullWidth
      sx={{
        '& .MuiButtonBase-root': {
          height: 1,
        },
      }}
    >
      <Stack sx={{ flexDirection: 'row', alignItems: 'center', height: 1 }}>
        <HuAvatar
          Icon={Icon}
          color={avatarColor}
        />
        <Stack sx={{ flexDirection: 'column', flex: 1, ml: 2, mr: 2 }}>
          <Typography
            variant="globalS"
            fontWeight="fontWeightSemiBold"
          >
            {title}
          </Typography>
          <Typography
            variant="globalXS"
            color={({ palette }) => palette.textColors?.neutralTextLighter}
          >
            {description}
          </Typography>
        </Stack>
        <IconChevronRight />
      </Stack>
    </HuCardContainer>
  );
};

export default NavTitleCard;