'use client';

import type { CodeExample } from '@/lib/code-example';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { CodeBlock } from '@/components/code-block';

export function CodeExampleTabs({ examples }: { examples: CodeExample[] }) {
  if (examples.length === 0) return null;

  return (
    <Tabs defaultValue={examples[0].id} className="my-6">
      <TabsList className="mb-2 flex h-auto max-w-full flex-wrap gap-1">
        {examples.map((example) => (
          <TabsTrigger key={example.id} value={example.id} className="text-xs sm:text-sm">
            {example.label}
          </TabsTrigger>
        ))}
      </TabsList>
      {examples.map((example) => (
        <TabsContent key={example.id} value={example.id}>
          <CodeBlock code={example.code} language={example.language} title={example.label} />
        </TabsContent>
      ))}
    </Tabs>
  );
}