/* eslint-disable @next/next/no-img-element */
import React from "react";

type ValuesCardProps = {
  title: string;
  description: string;
  img: string;
  className?: string;
};

const ValuesCard = ({
  title,
  description,
  img,
  className,
}: ValuesCardProps) => {
  return (
    <div
      className={`${
        className || ""
      } w-full max-w-[320px] md:max-w-[280px] lg:max-w-[300px] xl:max-w-none border-[0.5px] border-[#DD577F] rounded-[12px] h-[420px] md:h-[440px] lg:h-[460px] xl:h-[420px] 2xl:h-[460px] transition-all duration-100 ease-in-out relative overflow-hidden group`}
    >
      {/* Gradient Overlay with Image - hover changes gradient only */}
      <div className="absolute inset-0 bg-gradient-to-b from-[#DD577F]/50 to-black/30 transition-all duration-100 ease-in-out flex justify-end story-black-overlay overflow-hidden">
        <img
          src={img}
          alt={title}
          className="w-6/12 md:w-7/12 h-full text-left opacity-70 pr-0.5 -translate-y-5 md:-translate-y-7 lg:-translate-y-5 2xl:-translate-y-7"
        />
      </div>

      {/* Text Content */}
      <div className="flex flex-col justify-between h-full p-5 md:p-6 pointer-events-none relative z-10">
        <div>
          <h3 className="font-creato font-normal text-[22px] md:text-[26px] lg:text-[28px] xl:text-[24px] 2xl:text-[32px] leading-[110%] tracking-wide text-white">
            {title}
          </h3>
        </div>
        <p className="font-creato font-normal text-[13px] md:text-[14px] lg:text-[15px] xl:text-[13px] 2xl:text-[15px] leading-relaxed tracking-wider text-white">
          {description}
        </p>
      </div>
    </div>
  );
};

export default ValuesCard;