import React from "react";

import { Button } from "@/components/ui/button/button";
import { ButtonGroup } from "@/components/ui/button-group/button-group";

interface ItemType {
  key: string;
  /**
   * @description this'll should be a string
   */
  label: React.ReactNode;
}

interface SortButtonGroupProps {
  items: ItemType[];
  defaultActive?: React.Key;
  onChange?: (key: string) => void;
}

function SortButtonGroup(props: SortButtonGroupProps) {
  const { items, defaultActive, onChange } = props;
  const [active, setActive] = React.useState<React.Key>(
    defaultActive ?? items[0]?.key ?? 0,
  );

  return (
    <ButtonGroup>
      {items.map((item) => (
        <Button
          key={item.key}
          variant={active === item.key ? "primary-text" : "outline"}
          onClick={() => {
            setActive(item.key);
            onChange?.(item.key);
          }}
        >
          {item.label}
        </Button>
      ))}
    </ButtonGroup>
  );
}

export default SortButtonGroup;