import { forwardRef } from 'react';
import { View } from 'react-native';
import {
  FormRoot as FormRootPrimitive,
  dataAttributes,
  mergeDataAttributes,
  type FormRootProps,
} from '@cdx-ui/primitives';
import { cn } from '@cdx-ui/utils';
import { formRootVariants } from './styles';

// =============================================================================
// FORM ROOT (container — <form> on web, <View> on RN)
// =============================================================================

export interface FormProps extends FormRootProps {
  className?: string;
}

const FormRoot = forwardRef<View, FormProps>(({ className, children, style, ...props }, ref) => {
  const computedClassName = cn(formRootVariants(), className);

  return (
    <FormRootPrimitive
      ref={ref}
      className={computedClassName}
      style={style}
      {...props}
      {...mergeDataAttributes(props, dataAttributes({ slot: 'form' }))}
    >
      {children}
    </FormRootPrimitive>
  );
});

FormRoot.displayName = 'Form';

// =============================================================================
// EXPORT
// =============================================================================

export const Form = FormRoot;