'use client';

import { useState } from 'react';
import { buildSnippet, type SnippetInput } from '@/lib/install-snippets';
import { CodeBlock } from './code-block';
import { cn } from '@/lib/cn';
import type { InstallTarget } from '@bmm/types';

const TABS: { id: InstallTarget; label: string }[] = [
  { id: 'claude-desktop', label: 'Claude Desktop' },
  { id: 'claude-code', label: 'Claude Code' },
  { id: 'cursor', label: 'Cursor' },
  { id: 'vscode', label: 'VS Code' },
  { id: 'chatgpt', label: 'ChatGPT' },
  { id: 'codex', label: 'Codex' },
  { id: 'raw-url', label: 'Other' },
];

export function InstallSnippets({ input }: { input: SnippetInput }) {
  const [tab, setTab] = useState<InstallTarget>('claude-desktop');
  const snippet = buildSnippet(tab, input);
  return (
    <div>
      <div className="flex flex-wrap gap-1 border-b border-[--color-border]">
        {TABS.map((t) => (
          <button
            key={t.id}
            type="button"
            onClick={() => setTab(t.id)}
            className={cn(
              'relative px-3 py-2 text-[12.5px] transition-colors duration-200 ease-out',
              tab === t.id
                ? 'text-[--color-fg]'
                : 'text-[--color-fg-muted] hover:text-[--color-fg]',
            )}
          >
            {t.label}
            {tab === t.id && (
              <span className="absolute inset-x-0 -bottom-px h-px bg-[--color-fg]" />
            )}
          </button>
        ))}
      </div>
      <div className="pt-4">
        <CodeBlock label={snippet.label} code={snippet.code} />
        {snippet.note && (
          <p className="mt-2 text-[12px] leading-relaxed text-[--color-fg-muted]">{snippet.note}</p>
        )}
      </div>
    </div>
  );
}