import { CheckCircle2, Info, Shield } from 'lucide-react';

import type { EsaStaffRoleItem } from '@/shared/types/esaFunding';

interface EsaFundingImpactRolesProps {
  readonly schoolImpactItems: readonly string[];
  readonly staffRoleItems: readonly EsaStaffRoleItem[];
}

export function EsaFundingImpactRoles({
  schoolImpactItems,
  staffRoleItems,
}: EsaFundingImpactRolesProps) {
  if (schoolImpactItems.length === 0 && staffRoleItems.length === 0) {
    return null;
  }

  return (
    <section className="grid grid-cols-1 lg:grid-cols-2 gap-5">
      <div className="bg-gradient-to-br from-violet-500/10 to-violet-600/5 rounded-2xl p-6 border border-violet-500/20">
        <div className="flex items-center gap-2 mb-4">
          <Shield size={20} className="text-violet-400" />
          <h3 className="font-bold text-white">Why This Matters for Our School</h3>
        </div>
        <div className="space-y-3">
          {schoolImpactItems.map((item) => (
            <div key={item} className="flex items-start gap-2.5">
              <CheckCircle2 size={16} className="text-violet-400 flex-shrink-0 mt-0.5" />
              <span className="text-sm text-slate-300 leading-relaxed">{item}</span>
            </div>
          ))}
        </div>
      </div>

      <div className="bg-gradient-to-br from-amber-500/10 to-amber-600/5 rounded-2xl p-6 border border-amber-500/20">
        <div className="flex items-center gap-2 mb-4">
          <Info size={20} className="text-amber-400" />
          <h3 className="font-bold text-white">Your Role as Staff</h3>
        </div>
        <div className="space-y-3">
          {staffRoleItems.map((item, index) => (
            <div key={item.title} className="flex items-start gap-2.5">
              <div className="w-6 h-6 rounded-full bg-amber-500/20 flex items-center justify-center flex-shrink-0 mt-0.5">
                <span className="text-xs font-bold text-amber-400">{index + 1}</span>
              </div>
              <div>
                <span className="text-sm font-semibold text-white">{item.title}</span>
                <p className="text-xs text-slate-400 mt-0.5">{item.description}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
