import { Button, CardActions, Typography, useTheme } from '@mui/material';
import { IconChevronRight } from '@tabler/icons-react';

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

const CardContainerFooter = ({ footer, sx }: CardContainerFooterProps) => {
  const { palette } = useTheme();

  if (!footer) return null;

  const wrapperProps = {
    className: 'CardContainerFooter-root',
    sx: {
      justifyContent: 'space-between',
      borderTop: '1px solid',
      borderColor: palette.new.border.neutral.default,
      py: 1,
      ...sx,
    },
  };

  if ('action2' in footer) {
    return (
      <CardActions {...wrapperProps}>
        <Button
          className="CardContainerFooter-action2"
          variant="tertiary"
          sx={{ flex: 1 }}
          {...footer.action2}
        >
          {footer.action2.title}
        </Button>
        <Button
          className="CardContainerFooter-action1"
          variant="primary"
          sx={{ flex: 1 }}
          {...footer.action1}
        >
          {footer.action1.title}
        </Button>
      </CardActions>
    );
  }

  return (
    <CardActions {...wrapperProps}>
      {!!footer.text && (
        <Typography
          className="CardContainerFooter-text"
          variant="globalXXS"
          sx={{
            color: palette.new.text.neutral.lighter,
          }}
        >
          {footer.text}
        </Typography>
      )}
      <Button
        className="CardContainerFooter-action1"
        variant="tertiary"
        sx={{ minWidth: 'fit-content', ml: 'auto', order: 2 }}
        endIcon={<IconChevronRight fontSize="small" />}
        {...footer.action1}
      >
        {footer.action1.title}
      </Button>
    </CardActions>
  );
};

export default CardContainerFooter;
