import { useNavigate } from 'react-router-dom';

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

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

export type SettingOptionCardProps = {
  Icon: TablerIcon;
  title: string;
  description: string;
  to: string;
};

const SettingOptionCard = ({
  Icon,
  title,
  description,
  to,
}: SettingOptionCardProps) => {
  const navigate = useNavigate();

  const { shadows, palette } = useTheme();

  const handleClick = () => {
    navigate(to);
  };

  return (
    <CardContainer
      fullWidth
      noHover
      onClick={handleClick}
      sx={{
        '&:hover, :focus-visible': {
          boxShadow: shadows?.[1],
        },
        '& button': {
          border: '1px solid transparent',
          height: '100%',
          display: 'flex',
          justifyContent: 'flex-start',
          alignItems: 'flex-start',
        },
        '& button:focus-visible': {
          borderColor: palette.newBase?.brand[400],
        },
      }}
    >
      <Stack sx={{ gap: 2 }}>
        <Avatar
          Icon={Icon}
          color="primary"
          variant="square"
        />
        <Title
          variant="M"
          title={title}
          description={description}
        />
      </Stack>
    </CardContainer>
  );
};

export default SettingOptionCard;