'use client';

import React from 'react';
import { HierarchySeriesItem } from '@/services/api/catalogService';

interface SeriesSelectorProps {
  seriesList: HierarchySeriesItem[];
  selectedSeriesId: string | null;
  onSelectSeries: (seriesId: string | null) => void;
}

export const SeriesSelector: React.FC<SeriesSelectorProps> = ({
  seriesList,
  selectedSeriesId,
  onSelectSeries,
}) => {
  if (!seriesList || seriesList.length === 0) return null;

  return (
    <div className="w-full mb-8">
      <h3 className="text-base font-bold text-gray-900 mb-4 tracking-tight">
        Select Series
      </h3>

      <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 lg:grid-cols-5 gap-3">
        {/* All Series Pill */}
        <button
          onClick={() => onSelectSeries(null)}
          className={`py-3.5 px-4 rounded-xl text-xs font-semibold transition-all duration-200 text-center ${
            selectedSeriesId === null
              ? 'bg-gray-900 text-white shadow-sm font-bold'
              : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
          }`}
        >
          All Series
        </button>

        {/* Series List */}
        {seriesList.map((series) => {
          const isSelected = selectedSeriesId === series.series_id;
          return (
            <button
              key={series.series_id}
              onClick={() => onSelectSeries(series.series_id)}
              className={`py-3.5 px-4 rounded-xl text-xs font-semibold transition-all duration-200 text-center truncate ${
                isSelected
                  ? 'bg-red-600 text-white shadow-md font-bold scale-[1.02]'
                  : 'bg-gray-100 text-gray-800 hover:bg-gray-200 hover:text-gray-900'
              }`}
            >
              {series.name}
            </button>
          );
        })}
      </div>
    </div>
  );
};