import React from 'react';
import ResponsiveImage from '@/components/shared/ResponsiveImage';
import { cn } from '@heroui/react';

export interface IAmenity {
  title: string;
  description: string;
  image: IDynamicImage;
}
const Amenity: React.FC<IAmenity & { index: string }> = ({
  index,
  title,
  description,
  image
}) => {
  const cardClassNames = cn([
    'lg:min-h-[18em]',
    'flex flex-col justify-center lg:gap-4',
    'bg-[rgba(40,43,70,0.5)]',
    'backdrop-blur-[10px]',
    'bg-gradient-to-b',
    'from-[#CC93D3]',
    'via-[#CC93D3]',
    'to-[#793BE0]',
    'border border-transparent',
    'px-4 py-6 md:p-8',
    'text-white',
    'rounded-lg',
    'lg:max-w-sm xl:max-w-md',
    'before:bg-content',
    'before:absolute',
    'before:inset-0',
    'before:rounded-lg',
    'before:bg-primary-800/95',
    'before:-z-10'
  ]);
  return (
    <div className="flex flex-col lg:flex-row gap-4 md:gap-6 lg:min-h-[30em]">
      <div className={cardClassNames}>
        {index && (
          <h1 className="font-light text-5xl md:text-4xl lg:text-8xl mb-4  bg-gradient-to-b from-[#CC93D3] via-[#CC93D3] to-[#793BE0] bg-clip-text text-transparent">
            {index}
          </h1>
        )}
        {title && (
          <h2 className="text-white font-serif text-xl mb-3 md:text-4xl">
            {title}
          </h2>
        )}
        {description && <p className="mb-2">{description}</p>}
      </div>
      <div className="rounded-xl overflow-hidden relative w-full max-w-6xl">
        <div className="lg:absolute lg:min-h-[26em] h-full z-10 top-0 left-0 [&>picture]:w-full [&>picture]:h-full">
          <ResponsiveImage
            priority
            className="select-none h-full lg:object-cover object-center aspect-[2/1]"
            src={image?.url}
            width={image?.width}
            height={image?.width}
            sizes="100vw"
          />
        </div>
      </div>
    </div>
  );
};

export default Amenity;
