"use client";

import { useTranslations } from "next-intl";

import { AudioSidebarMusicTab } from "@/components/studio/sidebar/AudioSidebarMusicTab";
import { AudioSidebarVoiceoverPane } from "@/components/studio/sidebar/AudioSidebarVoiceoverPane";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { cn } from "@/lib/utils";

export function AudioSidebarContent() {
  const t = useTranslations("auto.componentsStudioSidebarAudioSidebarContent");

  return (
    <aside
      className={cn(
        "flex h-full w-full flex-col overflow-hidden bg-white text-gray-900"
      )}
    >
      <Tabs defaultValue="music" className="flex min-h-0 flex-1 flex-col">
        <div className="shrink-0 border-b border-gray-200 px-3 pt-3">
          <TabsList className="grid h-9 w-full grid-cols-2 rounded-full bg-gray-100 p-1">
            <TabsTrigger
              value="music"
              className="rounded-full text-xs font-medium data-[state=active]:bg-white data-[state=active]:text-gray-900 data-[state=active]:shadow-sm text-gray-500"
            >
              {t("musicTab")}
            </TabsTrigger>
            <TabsTrigger
              value="voiceover"
              className="rounded-full text-xs font-medium data-[state=active]:bg-white data-[state=active]:text-gray-900 data-[state=active]:shadow-sm text-gray-500"
            >
              {t("voiceoverTab")}
            </TabsTrigger>
          </TabsList>
        </div>

        <TabsContent
          value="music"
          className="mt-0 min-h-0 flex-1 overflow-y-auto p-3 focus-visible:outline-none"
        >
          <AudioSidebarMusicTab />
        </TabsContent>

        <TabsContent
          value="voiceover"
          className="mt-0 min-h-0 flex-1 overflow-y-auto p-3 focus-visible:outline-none"
        >
          <AudioSidebarVoiceoverPane />
        </TabsContent>
      </Tabs>
    </aside>
  );
}
