import * as Tabs from "@radix-ui/react-tabs";
import { Upload, Mic, Music2 } from "lucide-react";
import AudioUploader from "./AudioUploader";
import MicRecorder from "./MicRecorder";
import SampleLibrary from "./SampleLibrary";
import { cn } from "@/lib/utils";

interface Props {
  defaultValue?: "upload" | "record" | "sample";
}

/** Tabbed audio-input picker. Saves vertical space in the Demo sidebar. */
export default function InputTabs({ defaultValue = "upload" }: Props) {
  return (
    <Tabs.Root defaultValue={defaultValue} className="panel overflow-hidden">
      <Tabs.List className="flex border-b border-line bg-surface-alt/40">
        <TabTrigger value="upload" icon={Upload} label="Upload" />
        <TabTrigger value="record" icon={Mic} label="Record" />
        <TabTrigger value="sample" icon={Music2} label="Sample" />
      </Tabs.List>
      <Tabs.Content value="upload" className="p-3">
        <AudioUploader />
      </Tabs.Content>
      <Tabs.Content value="record" className="p-3">
        <MicRecorder />
      </Tabs.Content>
      <Tabs.Content value="sample" className="p-3">
        <SampleLibrary />
      </Tabs.Content>
    </Tabs.Root>
  );
}

function TabTrigger({
  value,
  icon: Icon,
  label,
}: {
  value: string;
  icon: typeof Upload;
  label: string;
}) {
  return (
    <Tabs.Trigger
      value={value}
      className={cn(
        "flex flex-1 items-center justify-center gap-1.5 border-b-2 border-transparent px-3 py-2.5 font-mono text-[11px] uppercase tracking-wider text-ink-dim transition",
        "hover:bg-surface-alt/60 hover:text-ink",
        "data-[state=active]:border-cyber data-[state=active]:bg-cyber/5 data-[state=active]:text-cyber"
      )}
    >
      <Icon className="h-3.5 w-3.5" />
      {label}
    </Tabs.Trigger>
  );
}