import Autoplay from 'embla-carousel-autoplay';
import { Carousel } from '@mantine/carousel';
import { Avatar, Card, Group, Stack, Text, Title } from '@mantine/core';
import styles from './Testimonial.module.css';

export interface TestimonialItem {
  text: string;
  clientName: string;
  role: string;
  business: string;
}

const defaultTestimonials: TestimonialItem[] = [
  {
    text: "What set Craig apart was his ability to understand our business challenges and deliver a solution that worked for us. He didn't just build a model, he delivered a system our team could actually use.",
    clientName: 'Steven Adair',
    role: 'Director',
    business: 'Managing Utilities Limited',
  },
];

interface TestimonialsCarouselProps {
  testimonials?: TestimonialItem[];
}

function TestimonialsCarousel({ testimonials = defaultTestimonials }: TestimonialsCarouselProps) {
  const autoplay = Autoplay();

  return (
    <div className={styles.wrapper}>
      <Title ta="center" mb="xl">
        Testimonials
      </Title>
      <Carousel
        slideSize="100%"
        slideGap="md"
        loop
        align="start"
        plugins={[autoplay]}
        onMouseEnter={autoplay.stop}
        onMouseLeave={autoplay.reset}
        withControls
      >
        {testimonials.map((testimonial, index) => (
          <Carousel.Slide key={index}>
            <Card shadow="sm" padding="lg" radius="md" withBorder className={styles.card}>
              <Stack gap="sm">
                <Text size="lg">{testimonial.text}</Text>
                <Group gap="sm">
                  <Avatar radius="xl">{testimonial.clientName.charAt(0)}</Avatar>
                  <div>
                    <Text size="lg" fw={700}>
                      {testimonial.clientName}
                    </Text>
                    <Text size="sm" c="dimmed">
                      {testimonial.role}, {testimonial.business}
                    </Text>
                  </div>
                </Group>
              </Stack>
            </Card>
          </Carousel.Slide>
        ))}
      </Carousel>
    </div>
  );
}

export default TestimonialsCarousel;