/**
 * LayoutSelector - Layout type selection component
 */

import React from 'react';
import PropTypes from 'prop-types';
import { Radio, Tooltip } from 'antd';
import { LAYOUT_TYPES, LAYOUT_OPTIONS, COMPONENT_SIZES } from './constants';

const LayoutSelector = ({
  value = LAYOUT_TYPES.MODAL,
  onChange,
  className = '',
  size = 'small',
  ...props
}) => {
  const handleChange = (e) => {
    if (onChange) {
      onChange(e.target.value);
    }
  };

  return (
    <div className={`layout-selector ${className}`} {...props}>
      <Radio.Group
        value={value}
        onChange={handleChange}
        size={size}
        buttonStyle="solid"
        className="layout-selector__radio-group"
      >
        {LAYOUT_OPTIONS.map(option => (
          <Tooltip
            key={option.value}
            title={option.description}
            placement="bottom"
          >
            <Radio.Button
              value={option.value}
              className={`layout-selector__option layout-selector__option--${option.value.toLowerCase()}`}
            >
              {option.label}
            </Radio.Button>
          </Tooltip>
        ))}
      </Radio.Group>
    </div>
  );
};

LayoutSelector.propTypes = {
  value: PropTypes.oneOf(Object.values(LAYOUT_TYPES)),
  onChange: PropTypes.func,
  className: PropTypes.string,
  size: PropTypes.oneOf(COMPONENT_SIZES)
};

export default LayoutSelector;
