import { ReactNode } from "react";

interface ButtonGroupProps {
  children: ReactNode;
  className?: string;
}

export const ButtonGroup: React.FC<ButtonGroupProps> = ({
  children,
  className = "",
}) => {
  return (
    <div
      className={`inline-flex rounded-lg border border-gray-300 bg-white shadow-theme-xs dark:border-gray-700 dark:bg-gray-800 ${className}`}
    >
      {children}
    </div>
  );
};

interface ButtonGroupItemProps {
  children: ReactNode;
  onClick?: () => void;
  isActive?: boolean;
  className?: string;
  disabled?: boolean;
}

export const ButtonGroupItem: React.FC<ButtonGroupItemProps> = ({
  children,
  onClick,
  isActive = false,
  className = "",
  disabled = false,
}) => {
  return (
    <button
      onClick={onClick}
      disabled={disabled}
      className={`px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-white disabled:opacity-50 disabled:cursor-not-allowed ${
        isActive
          ? "bg-gray-100 text-gray-900 dark:bg-white/10 dark:text-white"
          : ""
      } ${className}`}
      type="button"
    >
      {children}
    </button>
  );
};

