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

const StyleFields = ({
  variantLabel = 'Card Variant',
  variantName = 'variant',
  variantDefault = 'elevated',
  borderRadiusLabel = 'Border Radius',
  borderRadiusName = 'borderRadius',
  borderRadiusDefault = 8,
}: StyleFieldsProps) => {
  return (
    <>
      <ChoiceField
        label={variantLabel}
        name={variantName}
        required={true}
        choices={[
          ['elevated', 'Elevated (with shadow)'],
          ['outlined', 'Outlined (with border)'],
          ['filled', 'Filled (solid background)'],
        ]}
        default={variantDefault}
      />
      <NumberField
        label={borderRadiusLabel}
        name={borderRadiusName}
        suffix="px"
        min={0}
        default={borderRadiusDefault}
      />
    </>
  );
};

export default StyleFields;
