import React from 'react';
import { Button } from '@/components/ui/button';

export interface Language {
  code: string;
  label: string;
}

interface LanguageTabsProps {
  languages: Language[];
  selectedLangs: string[];
  activeLang: string;
  onSelect: (code: string) => void;
}

const LanguageTabs: React.FC<LanguageTabsProps> = ({ languages, selectedLangs, activeLang, onSelect }) => {
  return (
    <div className="flex gap-2 flex-wrap">
      {selectedLangs.map((code) => {
        const langName = languages.find((l) => l.code === code)?.label || code;
        return (
          <Button
            key={code}
            variant={activeLang === code ? 'default' : 'outline'}
            size="sm"
            onClick={() => onSelect(code)}
          >
            {langName}
          </Button>
        );
      })}
    </div>
  );
};

export default LanguageTabs;
