import React from 'react';
import PropTypes from 'prop-types';

import { ButtonColorPicker, Stack, Typography } from '@/mui/components';

function ColorPicker({ hideLabel = false, title = '', disabled = false, ...props }) {
  return (
    <Stack spacing={1} direction="column" alignItems="flex-start" fullWidth>
      {title && (
        <Typography variant="caption" color="text.secondary">
          {title}
        </Typography>
      )}
      <Stack spacing={2} direction="row" alignItems="center" fullWidth>
        <ButtonColorPicker
          color={props.color ?? '#fff'}
          size="small"
          disableAlpha
          disabled={disabled}
          onPickerChange={(c) => props.onChange(c.hex)}
        />
        {!hideLabel && (
          <Typography variant="caption" color="text.primary">
            {props.color?.toUpperCase() ?? '#fff'}
          </Typography>
        )}
      </Stack>
    </Stack>
  );
}

ColorPicker.propTypes = {
  color: PropTypes.string.isRequired,
  hideLabel: PropTypes.bool,
  title: PropTypes.string,
  disabled: PropTypes.bool,
  onChange: PropTypes.func.isRequired,
};

export default ColorPicker;
