import React from 'react';
import { Button } from "@/components/ui/button";
import ImageCarousel from './ImageCarousel';

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

const ExpertiseSection: React.FC<ExpertiseSectionProps> = ({
  title,
  content,
  images,
  viewMoreLink,
  imageOnLeft = false,
}) => {
  return (
    <section className="expertise-section py-20 bg-gray-100">
      <div className={`container mx-auto flex flex-col md:flex-row items-center ${imageOnLeft ? 'md:flex-row-reverse' : ''}`}>
        <div className="md:w-1/3 mb-8 mx-10 md:mb-0">
          <ImageCarousel images={images} />
        </div>
        <div className="md:w-2/3 md:px-8">
          <h2 className="text-3xl font-bold mb-4">{title}</h2>
          <p className="text-lg mb-4">{content}</p>
          {/* <Button asChild>
            <a href={viewMoreLink}>View More</a>
          </Button> */}
        </div>
      </div>
    </section>
  );
};

export default ExpertiseSection;