import { forwardRef, type ReactNode } from 'react';
import { cn } from '@/lib/utils';
import type { FormTheme } from './Field';

type Props = {
  step: number;
  title: string;
  subtitle?: string;
  active: boolean;
  children: ReactNode;
  theme?: FormTheme;
};

export const FormBlock = forwardRef<HTMLDivElement, Props>(
  ({ step, title, subtitle, active, children, theme = 'light' }, ref) => {
    const dark = theme === 'dark';
    return (
      <section
        ref={ref}
        aria-hidden={!active}
        className={cn(
          'scroll-mt-28 transition-all duration-500 ease-out',
          // Spacing applied INSIDE so collapsed blocks leave no phantom gap.
          active
            ? 'opacity-100 max-h-[4000px] mt-12 first:mt-0'
            : 'opacity-0 max-h-0 mt-0 overflow-hidden pointer-events-none',
        )}
      >
        <div
          className={cn(
            'transition-transform duration-500 ease-out',
            active ? 'translate-y-0' : 'translate-y-4',
          )}
        >
          {/* Header */}
          <div className="flex items-center gap-3 mb-7">
            <span className={cn('flex items-center justify-center w-8 h-8 rounded-full text-white font-satoshi font-black text-sm', dark ? 'cta-gradient' : 'bg-primary')}>
              {step}
            </span>
            <div>
              <h2
                className={cn('font-satoshi text-xl lg:text-2xl font-black leading-tight', dark ? 'text-white' : 'text-foreground')}
                style={{ letterSpacing: '-0.02em' }}
              >
                {title}
              </h2>
              {subtitle && (
                <p className={cn('text-sm font-body mt-0.5', dark ? 'text-white/50' : 'text-foreground/50')}>{subtitle}</p>
              )}
            </div>
          </div>
          {/* Children — RevealItems handle their own top spacing */}
          <div>{children}</div>
        </div>
      </section>
    );
  },
);

FormBlock.displayName = 'FormBlock';