Advanced Button Group

"use client";

import { useEffect, useState } from "react";

export default function AdvancedButtonGroup() {
  const [active, setActive] = useState("all");
  const [indicatorStyle, setIndicatorStyle] = useState({});

  const buttons = [
    { id: "all", label: "All Items", count: 24 },
    { id: "active", label: "Active", count: 18 },
    { id: "pending", label: "Pending", count: 4 },
    { id: "inactive", label: "Inactive", count: 2 },
  ];

  useEffect(() => {
    const activeButton = document.querySelector(`[data-id="${active}"]`);
    if (activeButton instanceof HTMLElement) {
      const { offsetLeft, offsetWidth } = activeButton;
      setIndicatorStyle({
        left: offsetLeft,
        width: offsetWidth,
      });
    }
  }, [active]);

  return (
    <div className="relative bg-gray-100 p-1 rounded-xl inline-flex">
      <div
        className="absolute top-1 bottom-1 bg-white rounded-lg shadow-sm transition-all duration-300 ease-out"
        style={indicatorStyle}
      />

      {buttons.map((button) => (
        <button
          key={button.id}
          data-id={button.id}
          onClick={() => setActive(button.id)}
          className={`relative z-10 px-4 py-2 text-sm font-medium transition-colors duration-200 rounded-lg ${
            active === button.id
              ? "text-purple-600"
              : "text-gray-600 hover:text-gray-900"
          }`}
        >
          <span>{button.label}</span>
          <span className="ml-2 text-xs bg-gray-200 text-gray-600 px-2 py-0.5 rounded-full">
            {button.count}
          </span>
        </button>
      ))}
    </div>
  );
}