import React from 'react'
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-gray-200">
        <nav className="-mb-px flex space-x-8">
          <button
            onClick={() => onCategoryChange('all')}
            className={`py-4 px-1 border-b-2 font-medium text-sm ${
              selectedCategory === 'all' || selectedCategory === null
                ? 'border-blue-500 text-blue-600'
                : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
            }`}
          >
            Tous les articles
          </button>
          <button
            onClick={() => onCategoryChange('science-fiction')}
            className={`py-4 px-1 border-b-2 font-medium text-sm ${
              selectedCategory === 'science-fiction'
                ? 'border-blue-500 text-blue-600'
                : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
            }`}
          >
            Science-fiction
          </button>
          <button
            onClick={() => onCategoryChange('scientific-research')}
            className={`py-4 px-1 border-b-2 font-medium text-sm ${
              selectedCategory === 'scientific-research'
                ? 'border-blue-500 text-blue-600'
                : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
            }`}
          >
            Recherche scientifique
          </button>
        </nav>
      </div>
    </div>
  )
}
