interface FeatureCardProps {
  title: string;
  description: string;
  variant: "dark" | "light";
}

export default function FeatureCard({
  title,
  description,
  variant,
}: FeatureCardProps) {
  const gradient =
    variant === "dark"
      ? "var(--color-radial-gradient-2)"
      : "var(--color-radial-gradient)";
  const textColor = variant === "dark" ? "text-white" : "";

  return (
    <div
      className="rounded-[16px] p-4 sm:p-5 md:p-6 w-full sm:w-[85%] md:w-[75%] lg:w-[70%]"
      style={{
        backgroundImage: gradient,
      }}
    >
      <h3
        className={`font-semibold text-[14px] sm:text-[15px] md:text-[16px] lg:text-[18px] mb-2 ${textColor}`}
      >
        {title}
      </h3>
      <p
        className={`text-[11px] sm:text-[12px] md:text-[13px] lg:text-[14px] leading-relaxed opacity-90 ${textColor}`}
      >
        {description}
      </p>
    </div>
  );
}