/**
 * 색상 선택 패널 — 기존 스와치 팔레트 + 하단 고급 색상 팔레트
 */
import React from 'react';
import { COLOR_PALETTE } from '../utils/plotColorUtils';
import AdvancedColorPicker from './AdvancedColorPicker';

export interface ColorPickerPanelProps {
  hex6: string;
  onHexChange: (hex6: string) => void;
  /** false면 스와치 그리드만 숨김 (고급 팔레트만) */
  showQuickPalette?: boolean;
  className?: string;
}

const ColorPickerPanel: React.FC<ColorPickerPanelProps> = ({
  hex6,
  onHexChange,
  showQuickPalette = true,
  className = '',
}) => (
  <div className={`cpp-panel ${className}`.trim()}>
    {showQuickPalette && (
      <div className="cpp-quick-palette">
        <div className="plsp-palette cpp-palette-grid">
          {COLOR_PALETTE.map(c => (
            <button
              key={c}
              type="button"
              className={`plsp-color-cell${hex6.toUpperCase() === c.toUpperCase() ? ' selected' : ''}`}
              style={{ background: c }}
              title={c}
              onClick={() => onHexChange(c)}
            />
          ))}
        </div>
      </div>
    )}
    <div className="cpp-advanced-divider" aria-hidden />
    <AdvancedColorPicker hex6={hex6} onChange={onHexChange} />
  </div>
);

export default ColorPickerPanel;