Mana-Loop/src/components/game/CalendarDisplay.tsx

'use client';

import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
import { MAX_DAY, INCURSION_START_DAY } from '@/lib/game/constants';

interface CalendarDisplayProps {
  day: number;
  hour: number;
  incursionStrength?: number;
}

export function CalendarDisplay({ day }: CalendarDisplayProps) {
  const days: React.ReactElement[] = [];
  
  for (let d = 1; d <= MAX_DAY; d++) {
    let dayClass = 'w-6 h-6 sm:w-7 sm:h-7 rounded text-xs flex items-center justify-center font-mono border transition-all ';
    
    if (d < day) {
      dayClass += 'bg-blue-900/30 border-blue-800/50 text-blue-400';
    } else if (d === day) {
      dayClass += 'bg-blue-600/40 border-blue-500 text-blue-300 shadow-lg shadow-blue-500/30';
    } else {
      dayClass += 'bg-gray-800/30 border-gray-700/50 text-gray-500';
    }
    
    if (d >= INCURSION_START_DAY) {
      dayClass += ' border-red-600/50';
    }
    
    days.push(
      <Tooltip key={d}>
        <TooltipTrigger asChild>
          <div className={dayClass}>
            {d}
          </div>
        </TooltipTrigger>
        <TooltipContent>
          <p>Day {d}</p>
          {d >= INCURSION_START_DAY && <p className="text-red-400">Incursion Active</p>}
        </TooltipContent>
      </Tooltip>
    );
  }
  
  return (
    <div className="grid grid-cols-7 sm:grid-cols-7 md:grid-cols-14 gap-1">
      {days}
    </div>
  );
}

CalendarDisplay.displayName = "CalendarDisplay";
CalendarDisplay.displayName = "CalendarDisplay";