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

type WhyUsCardProps = {
  id: number | string;
  img: string;
  title: string;
  description: string;
  className?: string;
};

const WhyUsCard = ({
  id,
  img,
  title,
  description,
  className,
}: WhyUsCardProps) => {
  return (
    <div
      className={`${
        className || ""
      } w-full max-w-[360px] md:w-[300px] lg:w-[280px] xl:w-[320px] border-[0.5px] border-[#DD577F] rounded-[12px] flex-shrink-0 h-[340px] md:h-[360px] lg:h-[380px] xl:h-[420px] transition-all duration-100 ease-in-out relative overflow-hidden`}
    >
      {/* Gradient Overlay */}
      <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-8/12 h-full text-left opacity-70 pr-0.5"
        />
      </div>
      {/* Text */}
      <div className="flex flex-col justify-between h-full p-6 gap-4 pointer-events-none">
        <div className="space-y-5">
          <p className="font-creato font-normal text-[16px] text-white leading-relaxed tracking-widest">
            0{id}
          </p>
          <h2 className="font-creato font-normal text-[32px] leading-[100%] tracking-wide text-white">
            {title}
          </h2>
        </div>
        <p className="font-creato font-normal text-[16px] leading-relaxed tracking-wider text-white">
          {description}
        </p>
      </div>
    </div>
  );
};

export default WhyUsCard;