import Image from "next/image";

interface AiRiskCardProps {
  title: string;
  description: string;
  image: string;
  reverse?: boolean;
}

export default function AiRiskCard({
  title,
  description,
  image,
  reverse = false,
}: AiRiskCardProps) {
  return (
    <div
      className={`grid items-center gap-4 sm:gap-6 md:gap-10 lg:gap-16 xl:gap-20
      ${
        reverse
          ? "grid-cols-1 md:grid-cols-[1fr_360px] lg:grid-cols-[1fr_520px]"
          : "grid-cols-1 md:grid-cols-[360px_1fr] lg:grid-cols-[520px_1fr]"
      }`}
    >
      {/* Image */}
      <div
        className={`${
          reverse ? "md:order-2" : "md:order-1"
        } order-1`}
      >
        <div className="relative overflow-hidden rounded-2xl md:rounded-3xl shadow-lg">
          <Image
            src={image}
            alt={title}
            width={460}
            height={300}
            className="
              w-full
              h-56
              sm:h-64
              md:h-72
              xl:h-80
              object-cover
              transition-transform
              duration-500
              hover:scale-105
            "
          />
        </div>
      </div>

      {/* Content */}
      <div
        className={`${
          reverse ? "md:order-1" : "md:order-2"
        } order-2 max-w-xl`}
      >
        <h3
          className="
            text-xl sm:text-2xl lg:text-3xl 2xl:text-4xl
            font-medium
            leading-tight
            text-heading
          "
        >
          {title}
        </h3>

        <p
          className="
            mt-2 md:mt-4
            text-sm
            sm:text-base
            lg:text-lg
            lg:leading-7
            text-text
          "
        >
          {description}
        </p>
      </div>
    </div>
  );
}