"use client";

import type { ReactNode } from "react";

import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

type ConfigChipGroupProps = {
  label?: string;
  children: ReactNode;
  className?: string;
};

export function ConfigChipGroup({ label, children, className }: ConfigChipGroupProps) {
  return (
    <div className={cn("space-y-2.5", className)}>
      {label ? <p className="text-sm font-medium text-foreground">{label}</p> : null}
      <div className="flex flex-wrap gap-2">{children}</div>
    </div>
  );
}

type ConfigChipProps = {
  active: boolean;
  onClick: () => void;
  children: ReactNode;
  disabled?: boolean;
  className?: string;
};

export function ConfigChip({ active, onClick, children, disabled, className }: ConfigChipProps) {
  return (
    <Button
      type="button"
      variant={active ? "default" : "outline"}
      size="sm"
      disabled={disabled}
      className={cn("h-8 rounded-full px-3 text-sm font-medium", active && "shadow-sm", className)}
      onClick={onClick}
    >
      {children}
    </Button>
  );
}
