import { clsx } from "clsx";
import { ComponentPropsWithoutRef } from "react";

export function TabList({ className, ...props }: ComponentPropsWithoutRef<"div">) {
  return (
    <div
      className={clsx("inline-flex gap-2 rounded-[var(--radius-lg)] bg-[color:var(--color-border)/0.12] p-1", className)}
      role="tablist"
      {...props}
    />
  );
}

export interface TabProps extends ComponentPropsWithoutRef<"button"> {
  isActive?: boolean;
}

export function Tab({ className, isActive, ...props }: TabProps) {
  return (
    <button
      className={clsx(
        "min-w-[120px] rounded-[var(--radius-md)] px-4 py-2 text-sm font-medium transition",
        isActive
          ? "bg-[var(--color-foreground)] text-[var(--color-background)] shadow"
          : "bg-transparent text-[var(--color-muted)] hover:text-[var(--color-foreground)]"
      )}
      aria-selected={isActive}
      role="tab"
      {...props}
    />
  );
}