見た目が似てるからという理由で共通化・コンポーネント化するな

type ButtonProps = {
  label: string;
  onClick: () => void;
};

export function Button({ label, onClick }: ButtonProps) {
  return (
    <button className="btn-primary" onClick={onClick}>
      {label}
    </button>
  );
}

type ButtonProps = {
  label: string;
  variant?: 'primary' | 'secondary' | 'tertiary' | 'danger' | 'ghost';
  size?: 'small' | 'medium' | 'large';
  isDisabled?: boolean;
  isLoading?: boolean;
  showBackIcon?: boolean;
  showForwardIcon?: boolean;
  showDownloadIcon?: boolean;
  showUploadIcon?: boolean;
  showMenuIcon?: boolean; // ← 先週追加された
  onClick: () => void;
};

export function Button({
  label,
  variant = 'primary',
  size = 'medium',
  isDisabled = false,
  isLoading = false,
  showBackIcon = false,
  showForwardIcon = false,
  showDownloadIcon = false,
  showUploadIcon = false,
  showMenuIcon = false,
  onClick,
}: ButtonProps) {
  const handleClick = () => {
    // ローディング中は何もしない（あれ、disabledでも制御してるけど...）
    if (isLoading) return;
    onClick();
  };

  // variant × size の組み合わせでクラスが増えていく
  const variantClasses: Record<string, string> = {
    primary: 'bg-blue-600 text-white hover:bg-blue-700',
    secondary: 'bg-gray-200 text-gray-800 hover:bg-gray-300',
    tertiary: 'bg-transparent text-blue-600 hover:bg-blue-50',
    danger: 'bg-red-600 text-white hover:bg-red-700',
    ghost: 'bg-transparent text-gray-700 hover:bg-gray-100',
  };

  const sizeClasses: Record<string, string> = {
    small: 'px-2 py-1 text-sm',
    medium: 'px-4 py-2 text-sm',
    large: 'px-6 py-3 text-base',
  };

  const baseClasses =
    'inline-flex items-center justify-center rounded font-medium';

  const stateClasses = [
    isDisabled && 'opacity-50 cursor-not-allowed',
    isLoading && 'cursor-wait',
  ]
    .filter(Boolean)
    .join(' ');

  const className = [
    baseClasses,
    variantClasses[variant],
    sizeClasses[size],
    stateClasses,
  ]
    .filter(Boolean)
    .join(' ');

  return (
    <button
      className={className}
      disabled={isDisabled || isLoading}
      onClick={handleClick}
    >
      {/* 左側アイコン群: どれか1つだけ表示されるはず...? */}
      {showBackIcon && <Icon name="arrow_left" />}
      {showDownloadIcon && <Icon name="download" />}
      {showUploadIcon && <Icon name="upload" />}
      {showMenuIcon && <Icon name="menu" />}

      {isLoading ? <Spinner /> : <span>{label}</span>}

      {/* 右側アイコン: 次へ進むボタン用 */}
      {showForwardIcon && <Icon name="arrow_right" />}
    </button>
  );
}

{/* 呼び出し側: フラグの羅列で意図が読み取りづらい */}
<Button
  label="戻る"
  variant="secondary"
  size="medium"
  showBackIcon={true}
  showForwardIcon={false}
  showDownloadIcon={false}
  showUploadIcon={false}
  isDisabled={false}
  isLoading={false}
  onClick={goBack}
/>

{/* 排他的なはずのフラグを同時に指定できてしまう */}
<Button
  label="???"
  showBackIcon={true}
  showForwardIcon={true}
  showDownloadIcon={true}
  onClick={() => {}}
/>
{/* ← 左矢印、右矢印、ダウンロードアイコンが全部表示される？ */}
{/* そもそもこの組み合わせは意図されたものなのか？ */}

<BackButton onClick={goBack} />

export function ReservationForm() {
  return (
    <Button
      label="予約を確定する"
      variant="primary"
      size="large"
      showForwardIcon={true}
      onClick={confirmReservation}
    />
  );
}

export function ReservationForm() {
  return (
    <ReservationConfirmButton onClick={confirmReservation} />
  );
}

// Button.tsx のスタイルを修正
export function Button({ label, onClick }: { label: string; onClick: () => void }) {
  return (
    <button
      className="px-6 py-3 text-white bg-blue-600 rounded" // px-4 py-2 → px-6 py-3に変更
      onClick={onClick}
    >
      {label}
    </button>
  );
}

type ButtonProps = {
  // 本来の意図
  variant?: string;
  size?: string;

  // いつの間にか追加されたもの
  isDisabled?: boolean;      // ← まあこれは汎用的か
  isLoading?: boolean;       // ← これもまあ...
  showBackIcon?: boolean;    // ← ここから怪しい
  showForwardIcon?: boolean; // ← なぜアイコンがここに？
  showDownloadIcon?: boolean;// ← ダウンロード専用では？
  showUploadIcon?: boolean;  // ← アップロード専用では？
  showMenuIcon?: boolean;    // ← 完全に別物では？
  showBadge?: boolean;       // ← 通知バッジ？ボタンに？
  badgeCount?: number;       // ← もはや何のコンポーネント？
};