---
import { Card } from '@eliancodes/brutal-ui';
import { Image } from 'astro:assets';

interface Props {
  title: string;
  imgSrc: string | null;
  imgAlt: string;
  description: string;
}

const { title, imgAlt, imgSrc, description } = Astro.props;
---

<Card color='white'>
  <div class='rounded-lg'>
    {imgSrc && (<Image
      src={imgSrc}
      alt={imgAlt}
      width={100}
      height={100}
      class='rounded h-54 w-56'
    />)}
  </div>
  <h3 class='poppins text-lg font-bold md:text-xl'>{title}</h3>
  <p class='poppins line-clamp-4'>{description}</p>
  <slot />
</Card>