import { Button } from './ui/button';
import React from 'react';

interface ServiceContentProps {
  cohort: string;
  title: string;
  buttonText: string;
  imageUrl: string;
  imageAlt: string;
  isLeft: boolean;
}

const ServiceContent: React.FC<ServiceContentProps> = ({
  cohort,
  title,
  buttonText,
  imageUrl,
  imageAlt,
  isLeft,
}) => {
  return (
    <div className={`flex-col flex md:flex-row justify-between items-center w-full md:px-6 lg:px-24 ${isLeft ? '' : 'md:flex-row-reverse'}`}>
      {isLeft ? (
        <div>
          <img draggable="false" src={imageUrl} alt={imageAlt} className='w-96 lg:w-auto' />
          <div className='flex flex-col items-start'>
            <h3>{cohort}</h3>
            <h1 className=' text-secondary text-3xl max-w-md font-extrabold mb-8'>{title}</h1>
            <Button variant="link" size="lg" className='flex flex-row gap-2 px-0'>
              {buttonText}
              <img draggable="false" src="/src/assets/icons/arrow.svg" alt="arrow icon" />
            </Button>
          </div> 
        </div>
      ) : (
        <div>
          <div className='flex flex-col items-start'>
            <h3>{cohort}</h3>
            <h1 className=' text-secondary text-3xl max-w-md font-extrabold mb-8'>{title}</h1>
            <Button variant="link" size="lg" className='flex flex-row gap-2 px-0'>
              {buttonText}
              <img draggable="false" src="/src/assets/icons/arrow.svg" alt="arrow icon" />
            </Button>
          </div>
          <img draggable="false" src={imageUrl} alt={imageAlt} className='w-96 lg:w-auto' />
        </div>
      )}
    </div>
  );
};

export default ServiceContent;