'use client';

import { useMemo, useState } from 'react';
import { cn } from '@/lib/utils/cn';
import { buildCSS, buildTailwindCSS } from '@/lib/animate/cssBuilder';
import { CodeSnippet } from '@/components/ui/code-snippet';
import type { AnimationConfig } from '@/types/animate';

interface Props {
  config: AnimationConfig;
}

type ExportTab = 'css' | 'tailwind';

export function ExportPanel({ config }: Props) {
  const [tab, setTab] = useState<ExportTab>('css');
  const css = useMemo(() => buildCSS(config), [config]);
  const tailwind = useMemo(() => buildTailwindCSS(config), [config]);

  return (
    <div className="space-y-3 overflow-y-auto scrollbar-thin scrollbar-thumb-primary/20 scrollbar-track-transparent pr-0.5">
      <div className="flex items-center justify-between">
        <span className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest">Export</span>
        <div className="flex glass rounded-lg p-0.5 gap-0.5">
          {(['css', 'tailwind'] as ExportTab[]).map((t) => (
            <button
              key={t}
              onClick={() => setTab(t)}
              className={cn(
                'px-2.5 py-1 rounded-md text-[10px] font-mono transition-all',
                tab === t ? 'bg-primary text-primary-foreground' : 'text-muted-foreground hover:text-foreground'
              )}
            >
              {t === 'css' ? 'Plain CSS' : 'Tailwind v4'}
            </button>
          ))}
        </div>
      </div>
      {tab === 'css' && <CodeSnippet code={css} />}
      {tab === 'tailwind' && <CodeSnippet code={tailwind} />}
    </div>
  );
}