'use client';

import Image from 'next/image';

interface FormSectionProps {
  id: string;
  icon: string;
  title: string;
  children: React.ReactNode;
  onEdit?: () => void;
  showEdit?: boolean;
}

export function FormSection({ id, icon, title, children, onEdit, showEdit }: FormSectionProps) {
  return (
    <div id={id} className="scroll-mt-6">
      <div className="flex items-center justify-between mb-4">
        <div className="flex items-center gap-2">
          <Image src={icon} alt={title} width={20} height={20} />
          <h3 className="text-[16px] font-bold text-[#00293D] font-fractul">{title}</h3>
        </div>
        {showEdit && onEdit && (
          <button
            onClick={onEdit}
            className="flex items-center gap-1 text-[#E58625] text-[12px] font-medium font-serif hover:underline"
          >
            <span>+ Edit</span>
          </button>
        )}
      </div>
      {children}
    </div>
  );
}
