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

import HuAccordion from '@material-hu/components/design-system/Accordion';
import Button from '@material-hu/components/design-system/Buttons/Button';

type AlertAccordionProps = {
  Icon?: TablerIcon;
  title: string;
  description: string;
  buttonTitle: string;
  onClick: () => void;
};
const AlertAccordion = ({
  Icon,
  title,
  description,
  buttonTitle,
  onClick,
}: AlertAccordionProps) => {
  return (
    <HuAccordion
      elevation={0}
      sx={{
        border: _theme =>
          `1px solid ${_theme.palette.new.border.neutral.default}`,
        borderRadius: _theme => _theme.shape.borderRadiusL,
      }}
      square
      title={title}
      {...(Icon && { avatar: { Icon } })}
      customDetail={
        <Stack>
          <Typography
            variant="globalXS"
            sx={theme => ({
              color: theme.palette.new.text.neutral.lighter,
              pb: 2,
            })}
          >
            {description}
          </Typography>
          <Button
            variant="contained"
            onClick={onClick}
          >
            {buttonTitle}
          </Button>
        </Stack>
      }
    />
  );
};

export default AlertAccordion;