import { useState } from "react";
import ComponentCard from "../../../components/common/ComponentCard";
import PageMeta from "../../../components/common/PageMeta";
import { ButtonGroup, ButtonGroupItem } from "../../../components/ui/button-group";

export default function ButtonsGroup() {
  const [activeGroup, setActiveGroup] = useState("left");

  return (
    <>
      <PageMeta
        title="React.js Button Groups Dashboard | TailAdmin - React.js Admin Dashboard Template"
        description="This is React.js Button Groups Dashboard page for TailAdmin - React.js Tailwind CSS Admin Dashboard Template"
      />
      <div className="space-y-5 sm:space-y-6">
        <ComponentCard title="Default Button Group">
          <ButtonGroup>
            <ButtonGroupItem
              isActive={activeGroup === "left"}
              onClick={() => setActiveGroup("left")}
              className="rounded-l-lg border-l-0"
            >
              Left
            </ButtonGroupItem>
            <ButtonGroupItem
              isActive={activeGroup === "center"}
              onClick={() => setActiveGroup("center")}
              className="border-l border-r border-gray-300 dark:border-gray-700"
            >
              Center
            </ButtonGroupItem>
            <ButtonGroupItem
              isActive={activeGroup === "right"}
              onClick={() => setActiveGroup("right")}
              className="rounded-r-lg border-r-0"
            >
              Right
            </ButtonGroupItem>
          </ButtonGroup>
        </ComponentCard>

        <ComponentCard title="Icon Button Group">
          <ButtonGroup>
            <ButtonGroupItem className="rounded-l-lg border-l-0">
              <svg
                className="w-5 h-5"
                fill="currentColor"
                viewBox="0 0 20 20"
              >
                <path
                  fillRule="evenodd"
                  d="M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
                  clipRule="evenodd"
                />
              </svg>
            </ButtonGroupItem>
            <ButtonGroupItem className="border-l border-r border-gray-300 dark:border-gray-700">
              <svg
                className="w-5 h-5"
                fill="currentColor"
                viewBox="0 0 20 20"
              >
                <path
                  fillRule="evenodd"
                  d="M10 3a1 1 0 011 1v12a1 1 0 11-2 0V4a1 1 0 011-1z"
                  clipRule="evenodd"
                />
              </svg>
            </ButtonGroupItem>
            <ButtonGroupItem className="rounded-r-lg border-r-0">
              <svg
                className="w-5 h-5"
                fill="currentColor"
                viewBox="0 0 20 20"
              >
                <path
                  fillRule="evenodd"
                  d="M3 10a1 1 0 011 1h12a1 1 0 110-2H4a1 1 0 01-1-1z"
                  clipRule="evenodd"
                />
              </svg>
            </ButtonGroupItem>
          </ButtonGroup>
        </ComponentCard>
      </div>
    </>
  );
}

