---
import IconButton from '@/components/icon-button.astro';
import Photo from '@/components/photo.astro';
import Typography from '@/components/typography.astro';
import type { Testimonial } from '@/types/testimonials-section';

export interface Props {
  testimonial: Testimonial;
}

const {
  testimonial: { author, content, image, relation, socials },
} = Astro.props;
---

<div class="flex w-full flex-col gap-4">
  <div class="flex justify-between">
    <div class="flex flex-col gap-4 sm:flex-row">
      <Photo src={image} alt={author} class="w-14 h-14 rounded-lg" width={108} height={108} />
      <div>
        <Typography variant="item-title">{author}</Typography>
        <Typography variant="item-subtitle">{relation}</Typography>
      </div>
    </div>
    {
      socials && (
        <div class="flex gap-3">
          {socials.map(({ icon, url, name }) => (
            <IconButton icon={icon} href={url} target="_blank" size="small" aria-label={name} />
          ))}
        </div>
      )
    }
  </div>
  <Typography variant="paragraph">{content}</Typography>
</div>