'use client';

import { useState } from 'react';

export type Lang = 'en' | 'zh';

interface LanguageTabsProps {
  activeLang: Lang;
  onChange: (lang: Lang) => void;
}

export default function LanguageTabs({ activeLang, onChange }: LanguageTabsProps) {
  return (
    <div className="flex border-b border-gray-200 mb-4">
      <button
        type="button"
        onClick={() => onChange('en')}
        className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
          activeLang === 'en'
            ? 'border-blue-500 text-blue-600'
            : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
        }`}
      >
        EN English
      </button>
      <button
        type="button"
        onClick={() => onChange('zh')}
        className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
          activeLang === 'zh'
            ? 'border-blue-500 text-blue-600'
            : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
        }`}
      >
        ZH 中文
      </button>
    </div>
  );
}

export function useLanguageTabs() {
  const [activeLang, setActiveLang] = useState<Lang>('en');
  return { activeLang, setActiveLang };
}