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

const testimonials = [
  {
    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",
  },
];



function TestimonialsCarousel() {
    const autoplay = Autoplay();
  
    return (
      <>
        <Title align="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>
      </>
    );
  }
  
  export default TestimonialsCarousel;