import { CheckCircle2 } from 'lucide-react';

import { EsaFundingIcon } from '@/components/esa-funding/EsaFundingIcon';
import type { EsaApprovedUse } from '@/shared/types/esaFunding';

interface EsaFundingApprovedUsesProps {
  readonly items: readonly EsaApprovedUse[];
}

export function EsaFundingApprovedUses({ items }: EsaFundingApprovedUsesProps) {
  if (items.length === 0) {
    return null;
  }

  return (
    <section>
      <div className="flex items-center gap-2 mb-4">
        <CheckCircle2 size={20} className="text-emerald-400" />
        <h2 className="text-lg font-bold text-white">What Can ESA Funds Be Used For?</h2>
      </div>
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        {items.map((item) => (
          <div
            key={item.title}
            className="bg-slate-800/60 backdrop-blur-sm rounded-xl p-5 border border-slate-700/50 hover:border-emerald-500/30 transition-all group"
          >
            <div className={`w-11 h-11 rounded-xl bg-gradient-to-br ${item.color} flex items-center justify-center mb-3 shadow-lg group-hover:scale-105 transition-transform`}>
              <span className="text-white">
                <EsaFundingIcon iconId={item.iconId} size={20} />
              </span>
            </div>
            <h3 className="font-semibold text-white text-sm mb-1.5">{item.title}</h3>
            <p className="text-xs text-slate-400 leading-relaxed">{item.description}</p>
          </div>
        ))}
      </div>
    </section>
  );
}
