import { CardMedia, useTheme } from '@mui/material';

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

const CardContainerImage = ({ img, sx }: CardContainerImageProps) => {
  const { shape } = useTheme();

  if (!img) return null;

  return (
    <CardMedia
      className="CardContainerImage-root"
      component="img"
      src={img}
      alt=""
      sx={{
        borderRadius: shape.borderRadiusL,
        borderBottomLeftRadius: 0,
        borderBottomRightRadius: 0,
        aspectRatio: '2/1',
        objectFit: 'cover',
        ...sx,
      }}
    />
  );
};

export default CardContainerImage;
