---
import Divider from '@/atoms/divider.astro';
import SectionCard from '@/atoms/section-card.astro';
import Typography from '@/atoms/typography.astro';
import Testimonial from '@/organisms/testimonial.astro';
import type { TestimonialsSection } from '@/types/testimonials-section';

export interface Props extends TestimonialsSection {}

const {
  testimonials,
  config: { title },
} = Astro.props;
---

<SectionCard section="testimonials">
  <Typography variant="section-title">{title}</Typography>
  <div class:list={['flex', 'flex-col']}>
    {
      testimonials.map((testimonial, index) => (
        <>
          <Testimonial testimonial={testimonial} />
          {index !== testimonials.length - 1 && <Divider />}
        </>
      ))
    }
  </div>
</SectionCard>