'use client';

import { useState } from 'react';

export type StewardingTab = 'pending' | 'resolved' | 'penalties';

interface StewardingTabsProps {
  activeTab: StewardingTab;
  onTabChange: (tab: StewardingTab) => void;
  pendingCount: number;
}

export function StewardingTabs({ activeTab, onTabChange, pendingCount }: StewardingTabsProps) {
  const tabs: Array<{ id: StewardingTab; label: string }> = [
    { id: 'pending', label: 'Pending' },
    { id: 'resolved', label: 'Resolved' },
    { id: 'penalties', label: 'Penalties' },
  ];

  return (
    <div className="border-b border-charcoal-outline">
      <div className="flex gap-4">
        {tabs.map(tab => (
          <button
            key={tab.id}
            onClick={() => onTabChange(tab.id)}
            className={`pb-3 px-1 font-medium transition-colors ${
              activeTab === tab.id
                ? 'text-primary-blue border-b-2 border-primary-blue'
                : 'text-gray-400 hover:text-white'
            }`}
          >
            {tab.label}
            {tab.id === 'pending' && pendingCount > 0 && (
              <span className="ml-2 px-2 py-0.5 text-xs bg-warning-amber/20 text-warning-amber rounded-full">
                {pendingCount}
              </span>
            )}
          </button>
        ))}
      </div>
    </div>
  );
}