import Avatar from '@design-system/Avatar';
import CardContainer from '@design-system/CardContainer';
import Pills from '@design-system/Pills';
import Title from '@design-system/Title';
import Tooltip from '@design-system/Tooltip';
import { Stack, type SxProps } from '@mui/material';
import { IconChevronRight } from '@tabler/icons-react';
import { appearFromBottom } from '@utils/animations';

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

const SelectionCriteriaCard = ({
  onClick,
  title,
  description,
  info,
  infoTooltip,
  Icon,
  withArrow = true,
  sx,
  slotProps = {},
}: SelectionCriteriaCardProps) => {
  const {
    root: rootProps,
    avatar: avatarProps,
    title: titleProps,
    pills: pillsProps,
  } = slotProps;

  return (
    <CardContainer
      fullWidth
      onClick={onClick}
      {...rootProps}
      sx={
        {
          gap: 2,
          flexDirection: 'row',
          animation: `${appearFromBottom} 125ms ease-in-out backwards`,
          ...sx,
          ...rootProps?.sx,
        } as SxProps
      }
    >
      <Stack
        sx={{
          flexDirection: 'row',
          gap: 1,
          width: '100%',
          alignItems: 'center',
        }}
      >
        <Avatar
          Icon={Icon}
          {...avatarProps}
        />
        <Title
          title={title}
          description={description}
          variant="S"
          {...titleProps}
          sx={{ maxWidth: '90ch', ...titleProps?.sx } as SxProps}
        />
        <Stack
          sx={{
            flex: 1,
            alignItems: 'center',
            flexDirection: 'row',
            gap: 1,
            justifyContent: 'end',
          }}
        >
          {info && (
            <Tooltip
              description={infoTooltip}
              disableTooltip={!infoTooltip}
            >
              <span>
                <Pills
                  label={info}
                  variant="outlined"
                  hasIcon={false}
                  type="highlight"
                  {...pillsProps}
                />
              </span>
            </Tooltip>
          )}
          {withArrow && <IconChevronRight />}
        </Stack>
      </Stack>
    </CardContainer>
  );
};

export default SelectionCriteriaCard;