import { type PropsWithChildren } from 'react';

import CardContainer, {
  type CardContainerProps,
} from '@material-hu/components/design-system/CardContainer';

export type LearningCardProps = PropsWithChildren<
  CardContainerProps & { id?: string }
>;

export const LearningCard = ({ id, children, ...props }: LearningCardProps) => {
  const sx = props.sx as Record<string, object> | undefined;
  return (
    <CardContainer
      id={id}
      {...props}
      fullWidth
      sx={{
        ...sx,
        '& .MuiCardContent-root': {
          display: 'flex',
          flexDirection: 'column',
          width: '100%',
          gap: 2,
          ...sx?.['& .MuiCardContent-root'],
        },
      }}
    >
      {children}
    </CardContainer>
  );
};