/**
 * ButtonGroup Component
 *
 * A group of toggle buttons for selecting from a set of options.
 * Uses existing CSS classes: floating-popover__button-group (compact) and modal-button-group (default)
 */

import {ReactNode} from "react";

export interface ButtonGroupOption<T extends string = string> {
  value: T;
  label: ReactNode;
  icon?: ReactNode;
}

interface ButtonGroupProps<T extends string = string> {
  options: ButtonGroupOption<T>[];
  value: T;
  onChange: (value: T) => void;
  size?: "default" | "compact" | "sm";
  fullWidth?: boolean;
  className?: string;
}

export function ButtonGroup<T extends string = string>({
  options,
  value,
  onChange,
  size = "default",
  fullWidth = false,
  className = "",
}: ButtonGroupProps<T>) {
  // Use existing CSS classes based on size
  const containerClass =
    size === "compact" || size === "sm"
      ? "floating-popover__button-group"
      : "modal-button-group";

  const itemClass =
    size === "compact" || size === "sm"
      ? "floating-popover__toggle"
      : "modal-toggle-btn";

  const itemSmClass = size === "sm" ? "floating-popover__toggle--sm" : "";

  return (
    <div
      className={`${containerClass} ${fullWidth ? "w-full" : ""} ${className}`}
    >
      {options.map((option) => (
        <button
          key={option.value}
          type="button"
          onClick={() => onChange(option.value)}
          className={`${itemClass} ${itemSmClass} ${
            value === option.value ? "active" : ""
          }`}
        >
          {option.icon && <span className="mr-1">{option.icon}</span>}
          {option.label}
        </button>
      ))}
    </div>
  );
}

export default ButtonGroup;
