'use client';

import { Layers3, Sparkles } from 'lucide-react';
import { useI18n } from '@/lib/hooks/use-i18n';
import { cn } from '@/lib/utils';

export type GenerationMode = 'normal' | 'large';

interface GenerationModeTabsProps {
  value: GenerationMode;
  onChange: (mode: GenerationMode) => void;
  showLarge?: boolean;
}

export function GenerationModeTabs({ value, onChange, showLarge = true }: GenerationModeTabsProps) {
  const { t } = useI18n();

  if (!showLarge) return null;

  const tabs: Array<{ id: GenerationMode; icon: typeof Sparkles; label: string }> = [
    { id: 'normal', icon: Sparkles, label: t('generation.normalMode') },
    { id: 'large', icon: Layers3, label: t('generation.largeMode') },
  ];

  return (
    <div
      role="tablist"
      aria-label={t('generation.modeLabel')}
      className="inline-flex items-center gap-1 rounded-xl border border-border/60 bg-background/70 p-1 shadow-sm backdrop-blur"
    >
      {tabs.map((tab) => {
        const Icon = tab.icon;
        const active = value === tab.id;

        return (
          <button
            key={tab.id}
            type="button"
            role="tab"
            aria-selected={active}
            tabIndex={active ? 0 : -1}
            onClick={() => onChange(tab.id)}
            className={cn(
              'inline-flex h-8 items-center gap-1.5 rounded-lg px-3 text-xs font-medium transition-[background-color,color,box-shadow,transform] duration-180 ease-out active:scale-[0.98] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-violet-500',
              active
                ? 'bg-violet-100 text-violet-800 shadow-sm dark:bg-violet-900/40 dark:text-violet-200'
                : 'text-muted-foreground hover:bg-muted/70 hover:text-foreground',
            )}
          >
            <Icon className="size-3.5" aria-hidden="true" />
            {tab.label}
          </button>
        );
      })}
    </div>
  );
}