import React from "react";
import { ArrowUpRightIcon } from "@heroicons/react/24/outline";

interface FeatureItem {
  title: string;
  description: string;
  icon: React.ReactNode;
  link?: { label: string; href: string };
}

interface FeatureGridProps {
  features: FeatureItem[];
}

const FeatureGrid: React.FC<FeatureGridProps> = ({ features }) => {
  const iconColors = [
    "from-[var(--color-primary)] to-[var(--color-primary-dark)]", // Blue
    "from-[var(--color-success)] to-[var(--color-success-dark)]", // Green
    "from-[var(--color-warning)] to-[var(--color-warning-dark)]", // Amber
    "from-[var(--color-purple)] to-[var(--color-purple-dark)]", // Purple
  ];

  return (
    <div className="max-w-6xl mx-auto px-6 py-24">
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        {features.map((feature, index) => {
          const gradient = iconColors[index % iconColors.length];
          return (
            <div
              key={feature.title}
              className="relative rounded-3xl border-2 border-gray-200 bg-gradient-to-br from-white to-gray-50/50 p-8 flex flex-col gap-4 group hover:border-[var(--color-primary)]/50 transition-all shadow-sm hover:shadow-xl hover:-translate-y-1"
            >
              <div className={`size-12 rounded-2xl bg-gradient-to-br ${gradient} flex items-center justify-center text-white shadow-lg`}>
                {feature.icon}
              </div>
              <h3 className="text-xl font-semibold text-gray-900">{feature.title}</h3>
              <p className="text-sm text-gray-600 leading-relaxed">
                {feature.description}
              </p>
              {feature.link && (
                <a
                  href={feature.link.href}
                  className="inline-flex items-center gap-2 text-sm font-semibold text-[var(--color-primary)] hover:text-[var(--color-brand-700)] group-hover:gap-3 transition-all"
                >
                  {feature.link.label}
                  <ArrowUpRightIcon className="h-4 w-4" />
                </a>
              )}
            </div>
          );
        })}
      </div>
    </div>
  );
};

export default FeatureGrid;