import { ChoiceField, NumberField } from '@hubspot/cms-components/fields';
import { ContentFieldsProps } from './types.js';

const ContentFields = ({
  orientationLabel = 'Orientation',
  orientationName = 'orientation',
  orientationDefault = 'horizontal',
  alignmentLabel = 'Alignment',
  alignmentName = 'alignment',
  alignmentDefault = 'stretch',
  lengthLabel = 'Length',
  lengthName = 'length',
  lengthDefault = 100,
  thicknessLabel = 'Thickness',
  thicknessName = 'thickness',
  thicknessDefault = 1,
}: ContentFieldsProps) => {
  return (
    <>
      <ChoiceField
        label={orientationLabel}
        name={orientationName}
        required={true}
        choices={[
          ['horizontal', 'Horizontal'],
          ['vertical', 'Vertical'],
        ]}
        default={orientationDefault}
      />
      <ChoiceField
        label={alignmentLabel}
        name={alignmentName}
        required={true}
        choices={[
          ['stretch', 'Stretch'],
          ['start', 'Start'],
          ['center', 'Center'],
          ['end', 'End'],
        ]}
        default={alignmentDefault}
      />
      <NumberField
        label={lengthLabel}
        name={lengthName}
        required={true}
        suffix="%"
        min={1}
        max={100}
        default={lengthDefault}
      />
      <NumberField
        label={thicknessLabel}
        name={thicknessName}
        required={true}
        suffix="px"
        min={1}
        default={thicknessDefault}
      />
    </>
  );
};

export default ContentFields;
