import React from 'react'
import { t } from '@/lib/i18n'

type CategoryFilter = 'science-fiction' | 'scientific-research' | 'all' | null

interface CategoryTabsProps {
  selectedCategory: CategoryFilter
  onCategoryChange: (category: CategoryFilter) => void
}

export function CategoryTabs({ selectedCategory, onCategoryChange }: CategoryTabsProps) {
  return (
    <div className="mb-6">
      <div className="border-b border-neon-cyan/30">
        <nav className="-mb-px flex space-x-8">
          <button
            onClick={() => onCategoryChange('science-fiction')}
            className={`py-4 px-1 border-b-2 font-medium text-sm transition-colors ${
              selectedCategory === 'science-fiction'
                ? 'border-neon-cyan text-neon-cyan'
                : 'border-transparent text-cyber-accent/70 hover:text-neon-cyan hover:border-neon-cyan/50'
            }`}
          >
            {t('category.science-fiction')}
          </button>
          <button
            onClick={() => onCategoryChange('scientific-research')}
            className={`py-4 px-1 border-b-2 font-medium text-sm transition-colors ${
              selectedCategory === 'scientific-research'
                ? 'border-neon-cyan text-neon-cyan'
                : 'border-transparent text-cyber-accent/70 hover:text-neon-cyan hover:border-neon-cyan/50'
            }`}
          >
            {t('category.scientific-research')}
          </button>
        </nav>
      </div>
    </div>
  )
}