import Link from 'next/link';
import { getCourtColor } from '../utils/bookingUtils';
import { SlotStatus } from '../lib/types';
import useTranslation from '../hooks/useTranslation';

interface CourtCardHeaderProps {
  courtName?: string;
  timeDisplay?: string;
  playerCount: number;
  status: SlotStatus | string;
  players?: any[];
  isOngoing?: boolean;
  linkHref?: string;
  viewMode?: 'timeline' | 'court';
}

export default function CourtCardHeader({
  courtName,
  timeDisplay,
  playerCount,
  status,
  players = [],
  isOngoing = false,
  linkHref,
  viewMode = 'timeline'
}: CourtCardHeaderProps) {
  const { t } = useTranslation();

  const displayText = viewMode === 'timeline' ? courtName : timeDisplay;

  return (
    <div className="relative p-4 bg-gradient-to-br from-white via-slate-50/30 to-slate-100/20">
      <div className="flex items-center justify-between">
        {/* Court name or time on the left */}
        {linkHref ? (
          <Link
            href={linkHref}
            className="text-lg font-bold text-slate-800 hover:text-slate-600 transition-colors duration-300"
          >
            {displayText}
          </Link>
        ) : (
          <span className="text-lg font-bold text-slate-800">
            {displayText}
          </span>
        )}

        {/* Player count with status indicator in center */}
        <div className="flex items-center space-x-2">
          <div 
            className={`w-2 h-2 rounded-full ${isOngoing ? 'animate-pulse' : ''}`}
            style={{ backgroundColor: getCourtColor(players, status as SlotStatus) }}
          ></div>
          <span className="text-sm text-slate-600 font-medium">
            {t('{count}/4 players', { count: String(playerCount) })}
          </span>
        </div>

        {/* Status badge on the right */}
        <span
          className="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold text-white shadow-sm"
          style={{ backgroundColor: getCourtColor(players, status as SlotStatus) }}
        >
          {t(status as 'available' | 'pending' | 'booked' | 'coach')}
        </span>
      </div>
    </div>
  );
}