---
import { Image } from 'astro:assets';

import Star from '../../assets/svg/star.svg';

import Styles from './testimonial-card.module.scss';

type Props = {
  image: any;
  description: string;
  name: string;
  role: string;
  classNameDescription?: string;
};

const { image, description, name, role, classNameDescription }: Props =
  Astro.props;
---

<div class={`card h-100 bg-secondary ${Styles.root}`}>
  <div class="card-body px-8 py-5">
    <div class="d-flex gap-1 mb-2">
      <Image src={Star} alt="Review rating" width="16" />
      <Image src={Star} alt="Review rating" width="16" />
      <Image src={Star} alt="Review rating" width="16" />
      <Image src={Star} alt="Review rating" width="16" />
      <Image src={Star} alt="Review rating" width="16" />
    </div>

    <div class={`mb-auto ${Styles.description} ${classNameDescription}`}>
      <p class="card-text text-white">
        {description}
      </p>
    </div>
  </div>

  <div class="card-footer pt-0 px-7 pb-5">
    <div class="d-flex align-items-center">
      <div class="flex-shrink-0">
        <Image class="avatar avatar-circle" src={image} alt={name} />
      </div>
      <div class="flex-grow-1 ms-3">
        <h5 class="card-title mb-0 text-white">{name}</h5>
        <p class="card-text small text-white">{role}</p>
      </div>
    </div>
  </div>
</div>
