Button Group

"use client";

import React from "react";

interface ButtonGroupProps {
  variant?: "default" | "outline" | "ghost";
  size?: "sm" | "md" | "lg";
  orientation?: "horizontal" | "vertical";
  children: React.ReactNode;
  className?: string;
}

interface ButtonGroupItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  isActive?: boolean;
  children: React.ReactNode;
}

function ButtonGroupItem({ isActive = false, children, className = "", ...props }: ButtonGroupItemProps) {
  return (
    <button className={`group-item ${isActive ? "active" : ""} ${className}`} data-active={isActive} {...props}>
      {children}
    </button>
  );
}

export default function ButtonGroup({ variant = "default", size = "md", orientation = "horizontal", children, className = "" }: ButtonGroupProps) {
  // Component implementation...
}

ButtonGroup.Item = ButtonGroupItem;