import React from 'react';
import { Carousel } from '@mantine/carousel';
import { Container, Grid, Image, Stack, Text, Title } from '@mantine/core';
import classes from './ExpertiseSection.module.css';

interface ExpertiseSectionProps {
  title: string;
  content: string;
  images: { url: string; alt: string }[];
  viewMoreLink: string;
  imageOnLeft?: boolean;
}

const ExpertiseSection: React.FC<ExpertiseSectionProps> = ({
  title,
  content,
  images,
  viewMoreLink: _viewMoreLink,
  imageOnLeft = false,
}) => {
  const slides = images.map((image) => (
    <Carousel.Slide key={image.url}>
      <Image
        src={image.url}
        alt={image.alt}
        style={{ width: '100%', height: 'auto', objectFit: 'cover' }}
      />
    </Carousel.Slide>
  ));

  return (
    <Container>
      <Grid className={classes.section}>
        <Grid.Col order={imageOnLeft ? 2 : 1} span={{ xs: 6, md: 8 }}>
          <Stack>
            <Title>{title}</Title>
            <Text size="lg">{content}</Text>
            {/* <Button component="a" href={viewMoreLink}>
                View More
                </Button> */}
          </Stack>
        </Grid.Col>
        <Grid.Col order={imageOnLeft ? 1 : 2} span={{ xs: 6, md: 4 }}>
          <Carousel
            slideSize={300}
            align="start"
            slideGap="md"
            controlsOffset="xl"
            controlSize={28}
            loop
            withIndicators
          >
            {slides}
          </Carousel>
        </Grid.Col>
      </Grid>
    </Container>
  );
};

export default ExpertiseSection;