import React from 'react';

/**
 * 汎用的なボタンスタイルコンポーネント
 * @param {object} props - React props
 * @param {React.ReactNode} props.children - ボタン内に表示される内容
 * @param {() => void} props.onClick - クリック時のイベントハンドラ
 * @param {boolean} props.disabled - ボタンを無効化するかどうか
 */
function Button({ children, onClick, disabled = false }) {
    const baseClasses = "inline-flex items-center justify-center rounded-md border border-transparent px-4 py-2 text-sm font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2";
    const colorClasses = "bg-blue-600 hover:bg-blue-700 focus:ring-blue-500";
    const disabledClasses = "disabled:opacity-50 disabled:cursor-not-allowed";

    return (
        <button
            type="button"
            onClick={onClick}
            disabled={disabled}
            className={`${baseClasses} ${colorClasses} ${disabledClasses}`}
        >
            {children}
        </button>
    );
}

export default Button;