import { ColorField } from '@hubspot/cms-components/fields';
import type { StyleFieldsProps } from './types.js';

const StyleFields = ({
  colorLabel = 'Text color',
  colorName = 'color',
  colorDefault = { color: '#000000', opacity: 100 },
  colorHoverLabel = 'Text color (hover)',
  colorHoverName = 'colorHover',
  colorHoverDefault = { color: '#000000', opacity: 100 },
  menuBackgroundColorLabel = 'Menu background color',
  menuBackgroundColorName = 'menuBackgroundColor',
  menuBackgroundColorDefault = { color: '#FFFFFF', opacity: 100 },
  menuBackgroundColorHoverLabel = 'Menu background color (hover)',
  menuBackgroundColorHoverName = 'menuBackgroundColorHover',
  menuBackgroundColorHoverDefault = { color: '#eaeaea', opacity: 100 },
}: StyleFieldsProps) => {
  return (
    <>
      <ColorField
        label={colorLabel}
        name={colorName}
        default={colorDefault}
        showOpacity={false}
      />
      <ColorField
        label={colorHoverLabel}
        name={colorHoverName}
        default={colorHoverDefault}
        showOpacity={false}
      />
      <ColorField
        label={menuBackgroundColorLabel}
        name={menuBackgroundColorName}
        default={menuBackgroundColorDefault}
        showOpacity={false}
      />
      <ColorField
        label={menuBackgroundColorHoverLabel}
        name={menuBackgroundColorHoverName}
        default={menuBackgroundColorHoverDefault}
        showOpacity={false}
      />
    </>
  );
};

export default StyleFields;
