import { Box, Typography } from '@mui/material';
import { ColorPickerInput } from '../components';

interface ColorControlProps {
  label: string;
  value: string;
  required?: boolean;
  error?: string;
  onChange: (hex: string) => void;
}

export function ColorControl({
  label,
  value,
  required,
  error,
  onChange,
}: Readonly<ColorControlProps>) {
  return (
    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
      <ColorPickerInput label={label} required={required} value={value} onChange={onChange} />
      {error && (
        <Typography variant="caption" color="error">
          {error}
        </Typography>
      )}
    </Box>
  );
}