import { type ComponentProps, type ReactNode, useId } from 'react';
import { type SxProps, type Theme } from '@material-hu/mui/styles';
import CardContainer from '@material-hu/components/design-system/CardContainer';

import { HEADER_CARD_HEIGHT } from '../constants';

type SportsPoolHeaderCardProps = {
  children: ReactNode;
  onClick?: () => void;
  hasShadow?: boolean;
  badge?: ComponentProps<typeof CardContainer>['badge'];
  actionAreaSx?: SxProps<Theme>;
};

const SportsPoolHeaderCard = ({
  children,
  onClick,
  hasShadow = false,
  badge,
  actionAreaSx,
}: SportsPoolHeaderCardProps) => {
  const id = useId();
  return (
    <CardContainer
      fullWidth
      onClick={onClick}
      hasShadow={hasShadow}
      badge={badge}
      id={id}
      padding={0}
      slotProps={{
        actionArea: {
          disableRipple: true,
          sx: [
            {
              display: 'flex',
              flexDirection: 'column',
              justifyContent: 'center',
              alignItems: 'stretch',
              height: '100%',
            },
            ...(Array.isArray(actionAreaSx) ? actionAreaSx : [actionAreaSx]),
          ],
        },
      }}
      sx={{
        height: {
          xs: 'auto',
          md: HEADER_CARD_HEIGHT,
        },
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',
      }}
    >
      {children}
    </CardContainer>
  );
};

export default SportsPoolHeaderCard;