/* eslint-disable @typescript-eslint/no-explicit-any */
import { createElement } from 'react';
import { TailwindPlayCommonParams } from '@/TailwindPlay/Fields/types.js';
import { InvalidField } from '@/TailwindPlay/Fields/Invalid.js';
import { extractHusarData } from '@/TailwindPlay/shared/extract.js';
import { isValidHtmlComponent } from '@/TailwindPlay/shared/constants.js';
import { isVoidElement } from '@/TailwindPlay/Fields/shared';

export const FieldString: React.FC<TailwindPlayCommonParams> = (props) => {
  const { v, attributes } = extractHusarData(props);
  if (typeof v !== 'string' && v !== null && typeof v !== 'undefined') return <InvalidField />;

  const tag = isValidHtmlComponent(attributes);

  if (isVoidElement(tag)) {
    // For void elements, use value/defaultValue instead of children
    return createElement(tag, { ...attributes, defaultValue: v || '' });
  }

  return createElement(tag, { ...attributes }, v || '');
};