'use client';

import { ReactNode } from 'react';

import { cn } from '@/lib/utils';

import FormFieldError from '@/components/forms/FormFieldError';

interface FieldWrapperProps {
  label?: string;
  required?: boolean;
  requiredNote?: string;
  helper?: string;
  error?: string;
  children: ReactNode;
}

export function FieldWrapper({
  label,
  required,
  requiredNote,
  helper,
  error,
  children,
}: FieldWrapperProps) {
  return (
    <div className={cn('field-wrapper stack-md', error && 'has-error')}>
      <div className="field-header stack-sm">
        {label && (
          <label className="field-label mb-1">
            <span className="inline-flex flex-wrap items-center gap-2">
              {label}
              {required && (
                <>
                  <span className="field-required text-red-500">*</span>
                  {requiredNote && (
                    <span className="field-required-note font-normal">{requiredNote}</span>
                  )}
                </>
              )}
            </span>
          </label>
        )}
        {helper && <p className="field-helper">{helper}</p>}
      </div>

      {children}

      {error && <FormFieldError message={error} />}
    </div>
  );
}