import React from 'react';
import ResponsiveImage from '@/components/shared/ResponsiveImage';
export interface ISlideProps {
  title?: string;
  description?: string;
  image: IDynamicImage;
}

const Slide: React.FC<ISlideProps> = ({ title, description, image }) => {
  const imageClass =
    'z-0 w-full h-full object-cover aspect-[9/16] sm:aspect-[8/10] md:aspect-[4/3]';

  return (
    <div className="relative rounded-xl overflow-hidden">
      <ResponsiveImage
        className={imageClass}
        src={image.url}
        width={image.width}
        height={image.height}
        alt={image.alternativeText}
        priority
        sizes="lg 50vw, sm 640px ,85vw"
      />

      <div className="absolute inset-0 flex flex-col justify-end bg-gradient-to-t from-primary from-0% to-transparent to-30% z-10 px-6 xl:px-8 2xl:px-10">
        <h5 className="text-foreground text-2xl font-light font-serif mb-2 md:text-3xl lg:text-4xl">
          {title}
        </h5>

        <p className="text-foreground font-light mb-8 max-w-screen-md lg:text-lg 2xl:text-xl">
          {description}
        </p>
      </div>
    </div>
  );
};

export default Slide;
