import { BaseControl } from '@wordpress/components';
import { useInstanceId } from '@wordpress/compose';

import {
  LKSProductCardLayoutOptions,
  LKS_PRODUCT_CARD_CARD_LAYOUT,
} from '../../constants';
import { RadioGroup } from '../radio-group';
import { LKSProductCardControlProps } from '../../type';

const PREFIX = `lks-product-card__card-layout`;

export const CardLayoutControl = ({
  attributes,
  setAttributes,
}: LKSProductCardControlProps) => {
  const instanceId = useInstanceId(CardLayoutControl);
  const id = `inspector_${PREFIX}_${instanceId}`;

  return (
    <BaseControl
      __nextHasNoMarginBottom
      label="Card Layout"
      id={id}
      className={PREFIX}
    >
      <RadioGroup<LKS_PRODUCT_CARD_CARD_LAYOUT>
        value={attributes.cardLayout}
        options={LKSProductCardLayoutOptions}
        onChange={value => setAttributes({ cardLayout: value })}
      />
    </BaseControl>
  );
};