import { FileText, Info } from 'lucide-react';
import type { ReactNode } from 'react';

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

interface EsaFundingQuickReferenceProps {
  readonly content: EsaFundingContent;
  readonly editor?: ReactNode;
}

export function EsaFundingQuickReference({ content, editor }: EsaFundingQuickReferenceProps) {
  if (content.parentConversationReferences.length === 0 && !editor) {
    return null;
  }

  return (
    <section className="bg-gradient-to-r from-slate-800/80 to-slate-800/60 rounded-2xl p-6 border border-slate-700/50">
      <div className="flex items-center gap-2 mb-4">
        <FileText size={20} className="text-emerald-400" />
        <h3 className="font-bold text-white">Quick Reference for Parent Conversations</h3>
      </div>
      <div className="bg-slate-900/60 rounded-xl p-5 border border-slate-700/40">
        <div className="space-y-4">
          {content.parentConversationReferences.map((reference) => (
            <div key={reference.id} className="space-y-4">
              <p className="text-sm text-slate-300 italic leading-relaxed">{reference.question}</p>
              <div className="bg-emerald-500/10 rounded-xl p-4 border border-emerald-500/20">
                <p className="text-sm text-emerald-100 leading-relaxed">{reference.answer}</p>
              </div>
            </div>
          ))}
        </div>
        <div className="mt-4 flex items-center gap-2 text-xs text-slate-500">
          <Info size={14} />
          <span>{ESA_FUNDING_STATIC_COPY.parentConversationFooter}</span>
        </div>
      </div>
      {editor}
    </section>
  );
}
