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

interface EsaFundingKeyPointsProps {
  readonly items: readonly EsaKeyPoint[];
}

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

  return (
    <section className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
      {items.map((point) => (
        <div
          key={point.label}
          className="bg-slate-800/60 backdrop-blur-sm rounded-xl p-4 border border-slate-700/50 flex items-center gap-3 hover:border-emerald-500/30 transition-all"
        >
          <div className="w-8 h-8 rounded-lg bg-emerald-500/15 flex items-center justify-center text-emerald-400 flex-shrink-0">
            <EsaFundingIcon iconId={point.iconId} size={16} />
          </div>
          <span className="text-sm font-medium text-slate-200">{point.label}</span>
        </div>
      ))}
    </section>
  );
}
