import { CardProps, cn, Card as NextCard } from '@heroui/react';
import ResponsiveImage from '@/components/shared/ResponsiveImage';
interface IGalleryCardProps extends CardProps {
  title?: string;
  image?: IDynamicImage;
  classname?: string;
}
const GalleryCard: React.FC<IGalleryCardProps> = ({
  image,
  classname,
  title,
  style
}) => {
  return (
    <NextCard
      style={{
        ...style
      }}
      className={cn(
        'shadow-none min-h-52 md:min-h-[24rem] lg:min-h-[28rem] inline-block relative w-full group',
        classname
      )}>
      {image && (
        <ResponsiveImage
          src={image.url}
          width={image.width}
          height={image.height}
          alt={image.alternativeText}
          sizes="100vw"
          className=" absolute object-cover w-full h-full aspect-[9/16]"
        />
      )}
      <div className="absolute z-10 w-full h-full bg-gradient-to-t from-[rgba(0,0,0,0)_1%] to-transparent flex items-end p-4 md:p-6">
        {title && <h1 className="text-lg text-white font-serif">{title}</h1>}
      </div>
    </NextCard>
  );
};

export default GalleryCard;
