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

import { ESA_FUNDING_STATIC_COPY } from '@/shared/constants/esaFunding';
import type { EsaFundingContent } from '@/shared/types/esaFunding';

interface EsaFundingStateNoticeProps {
  readonly content: EsaFundingContent;
}

export function EsaFundingStateNotice({ content }: EsaFundingStateNoticeProps) {
  if (content.stateChecklist.length === 0) {
    return null;
  }

  return (
    <section className="relative overflow-hidden rounded-2xl bg-gradient-to-br from-amber-500/15 to-orange-500/10 border-2 border-amber-500/30 p-6">
      <div className="flex items-start gap-4">
        <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-amber-500 to-orange-500 flex items-center justify-center flex-shrink-0 shadow-lg shadow-amber-500/20">
          <Info size={24} className="text-white" />
        </div>
        <div>
          <h3 className="text-lg font-bold text-white mb-2">{ESA_FUNDING_STATIC_COPY.stateNoticeTitle}</h3>
          <p className="text-sm text-slate-300 leading-relaxed mb-3">{ESA_FUNDING_STATIC_COPY.stateNoticeDescription}</p>
          <div className="bg-slate-800/60 rounded-xl p-4 border border-slate-700/40 space-y-2">
            <p className="text-sm text-slate-200 font-semibold">{ESA_FUNDING_STATIC_COPY.stateNoticeChecklistTitle}</p>
            <div className="space-y-1.5">
              {content.stateChecklist.map((item) => (
                <div key={item} className="flex items-start gap-2">
                  <CheckCircle2 size={14} className="text-amber-400 flex-shrink-0 mt-0.5" />
                  <span className="text-xs text-slate-400 leading-relaxed">{item}</span>
                </div>
              ))}
            </div>
          </div>
          <p className="text-xs text-slate-500 mt-3 italic">{ESA_FUNDING_STATIC_COPY.stateNoticeFooter}</p>
        </div>
      </div>
    </section>
  );
}
