import Stack from '@material-hu/mui/Stack';
import useTheme from '@material-hu/mui/styles/useTheme';

import Image from '@material-hu/components/composed-components/Image';
import SeeMoreText from '@material-hu/components/composed-components/SeeMoreText';
import CardContainer from '@material-hu/components/design-system/CardContainer';
import Title from '@material-hu/components/design-system/Title';

export type LibraryHomeCardProps = {
  imageSrc?: string;
  defaultImageSrc: string;
  title: string;
  description: string;
};

export const LibraryHomeCard = ({
  imageSrc,
  defaultImageSrc,
  title,
  description,
}: LibraryHomeCardProps) => {
  const theme = useTheme();
  const src = imageSrc || defaultImageSrc;
  const showPlaceholderBg = !imageSrc;

  return (
    <CardContainer
      fullWidth
      padding={0}
    >
      <Image
        alt=""
        aspectRatio="4/1"
        src={src}
        sx={{
          width: '100%',
          display: 'block',
          objectFit: 'cover',
          borderBottomLeftRadius: 0,
          borderBottomRightRadius: 0,
          borderTopLeftRadius: theme.shape.borderRadiusM,
          borderTopRightRadius: theme.shape.borderRadiusM,
          ...(showPlaceholderBg && {
            backgroundColor: theme.palette.new.background.elements.grey,
          }),
        }}
      />
      <Stack sx={{ px: 3, py: 2 }}>
        <Stack sx={{ flex: 1, minWidth: 0 }}>
          <Title
            fontWeight="fontWeightSemiBold"
            sx={{ minWidth: 0 }}
            title={title}
            variant="M"
          />
          <SeeMoreText
            text={description}
            lines={5}
            buttonSx={{
              '&:hover': {
                backgroundColor: 'transparent',
                textDecoration: 'none',
              },
            }}
          />
        </Stack>
      </Stack>
    </CardContainer>
  );
};