/* eslint-disable @typescript-eslint/no-explicit-any */
import { TailwindPlayCommonParams } from '@/TailwindPlay/Fields/types.js';
import { extractHusarData } from '@/TailwindPlay/shared/extract.js';
import { isValidHtmlComponent } from '../shared/constants';
import { createElement } from 'react';
import { isVoidElement } from '@/TailwindPlay/Fields/shared';
export const FieldRelation: React.FC<TailwindPlayCommonParams> = (props) => {
  const { attributes, v } = extractHusarData(props);
  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 ? (typeof v === 'string' ? v : typeof v === 'object' ? ('slug' in v ? v.slug : 'no data') : 'no data') : 'null',
  );
};