import { TextField, LinkField } from '@hubspot/cms-components/fields';
import Icon from '../Icon/index.js';
import { ContentFieldsProps } from './types.js';

const ContentFields = ({
  buttonTextLabel = 'Button text',
  buttonTextName = 'buttonText',
  buttonTextDefault = 'Click me',
  buttonLinkLabel = 'Button link',
  buttonLinkName = 'buttonLink',
  buttonLinkDefault = {
    url: {
      type: 'EXTERNAL',
      content_id: null,
      href: 'https://www.hubspot.com',
    },
  },
  showButtonLink = true,
  iconLabel,
  iconName,
  iconDefault,
  showIconLabel = 'Show button icon',
  showIconName,
  showIconDefault,
}: ContentFieldsProps) => {
  const iconContentFieldsProps = {
    iconLabel,
    iconName,
    iconDefault,
    showIconLabel,
    showIconName,
    showIconDefault,
  };

  return (
    <>
      <TextField
        label={buttonTextLabel}
        name={buttonTextName}
        default={buttonTextDefault}
      />
      {showButtonLink && (
        <LinkField
          label={buttonLinkLabel}
          name={buttonLinkName}
          default={buttonLinkDefault}
        />
      )}
      <Icon.ContentFields addIconToggle={true} {...iconContentFieldsProps} />
    </>
  );
};

export default ContentFields;
