import { CheckCircle2 } from 'lucide-react';

import { Button } from '@/components/ui/button';
import { cn } from '@/lib/utils';

interface EsaFundingAcknowledgementProps {
  readonly acknowledged: boolean;
  readonly onToggle: () => void;
}

export function EsaFundingAcknowledgement({
  acknowledged,
  onToggle,
}: EsaFundingAcknowledgementProps) {
  return (
    <section className={cn(
      'rounded-2xl p-6 border transition-all',
      acknowledged ? 'bg-emerald-500/10 border-emerald-500/30' : 'bg-slate-800/60 border-slate-700/50',
    )}
    >
      <div className="flex items-start gap-4">
        <Button
          type="button"
          variant="ghost"
          size="icon"
          onClick={onToggle}
          aria-pressed={acknowledged}
          aria-label="Toggle ESA funding acknowledgement"
          className={cn(
            'w-6 h-6 rounded-lg border-2 flex items-center justify-center flex-shrink-0 mt-0.5 transition-all p-0',
            acknowledged
              ? 'bg-emerald-500 border-emerald-500 hover:bg-emerald-500'
              : 'border-slate-600 hover:border-emerald-500/50',
          )}
        >
          {acknowledged && <CheckCircle2 size={16} className="text-white" />}
        </Button>
        <div>
          <h3 className={cn('font-semibold text-sm', acknowledged ? 'text-emerald-400' : 'text-white')}>
            {acknowledged
              ? 'Thank you for reviewing the ESA Funding Information!'
              : 'I have read and understand the ESA Funding Information'}
          </h3>
          <p className="text-xs text-slate-400 mt-1">
            {acknowledged
              ? 'Your acknowledgment has been recorded. You can revisit this page anytime for reference.'
              : 'Click the checkbox to acknowledge that you have reviewed this information. This helps us track staff awareness for compliance purposes.'}
          </p>
        </div>
      </div>
    </section>
  );
}
