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

'use client';

import { fmt } from '@/lib/game/stores';
import { DebugName } from '@/components/game/debug/debug-context';
import { formatHour } from '@/lib/game/utils/formatting';

interface TimeDisplayProps {
  day: number;
  hour: number;
  insight: number;
}

export function TimeDisplay({
  day,
  hour,
  insight,
}: TimeDisplayProps) {
  return (
    <DebugName name="TimeDisplay">
      <div className="flex items-center gap-4">
        <div className="text-center">
          <div className="text-lg font-bold game-mono text-amber-400">
            Day {day}
          </div>
          <div className="text-xs text-gray-400">
            {formatHour(hour)}
          </div>
        </div>
        
        <div className="text-center">
          <div className="text-lg font-bold game-mono text-purple-400">
            {fmt(insight)}
          </div>
          <div className="text-xs text-gray-400">Insight</div>
        </div>
      </div>
    </DebugName>
  );
}

TimeDisplay.displayName = "TimeDisplay";