/**
 * FontColorSetting
 *
 * 文字色設定用のコンポーネント
 * CustomColorPaletteを使用してテーマカラー/カスタムカラー + alpha値をサポート
 */

import { __ } from "@wordpress/i18n";
import CustomColorPalette, { hexToRgba, parseRgba } from "../../CustomColorPalette";

/**
 * FontColorSetting Component
 *
 * @param {Object} props
 * @param {string} props.colorValue - 現在の色の値（hex または rgba）
 * @param {number} props.alphaValue - 透明度（0-1）
 * @param {Function} props.onColorChange - 色変更時のコールバック関数
 * @param {Function} props.onAlphaChange - alpha変更時のコールバック関数
 * @param {string} props.label - ラベルテキスト（オプション）
 * @param {boolean} props.enableAlpha - alpha設定を有効にするか（デフォルト: true）
 * @returns {JSX.Element}
 */
const FontColorSetting = ({ colorValue, alphaValue = 1, onColorChange, onAlphaChange, label, enableAlpha = true }) => {
  const handleColorChange = (value) => {
    if (value === undefined || value === null) {
      onColorChange("transparent");
    } else {
      onColorChange(value);
    }
  };

  const handleAlphaChange = (value) => {
    if (onAlphaChange) {
      onAlphaChange(value);
    }
  };

  return (
    <div className="zenblocks-inspector-font-color">
      <CustomColorPalette
        color={colorValue}
        alpha={alphaValue}
        enableGradient={false}
        enableAlpha={enableAlpha}
        onColorChange={handleColorChange}
        onAlphaChange={handleAlphaChange}
        label={label || __("Text Color", "zenblocks")}
      />
    </div>
  );
};

export { hexToRgba, parseRgba };
export default FontColorSetting;
