import { useEditorVariableChecks, Island } from '@hubspot/cms-components';
// @ts-expect-error -- ?island not typed
import AccordionTitleIslandModule from './islands/AccordionTitleIsland.js?island';
import ContentFields from './ContentFields.js';
import StyleFields from './StyleFields.js';
import { AccordionTitleProps } from './types.js';
import AccordionTitleBase from './AccordionTitleBase.js';

const AccordionTitleComponent = ({
  icon = 'chevron',
  fieldPath,
  className = '',
  style = {},
  children,
}: AccordionTitleProps) => {
  const editorChecks = useEditorVariableChecks();
  const isInEditor = editorChecks.is_in_editor && !!fieldPath;

  return (
    <>
      <AccordionTitleBase
        icon={icon}
        fieldPath={fieldPath}
        className={className}
        style={style}
      >
        {children}
      </AccordionTitleBase>
      {isInEditor && <Island module={AccordionTitleIslandModule} />}
    </>
  );
};

type AccordionTitleComponentType = typeof AccordionTitleComponent & {
  ContentFields: typeof ContentFields;
  StyleFields: typeof StyleFields;
};

const AccordionTitle = AccordionTitleComponent as AccordionTitleComponentType;
AccordionTitle.ContentFields = ContentFields;
AccordionTitle.StyleFields = StyleFields;

export default AccordionTitle;
