'use client';

import { fmt } from '@/lib/game/stores';
import { formatHour } from '@/lib/game/utils/formatting';

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

export function TimeDisplay({
  day,
  hour,
  insight,
}: TimeDisplayProps) {
  return (
    <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>
  );
}

TimeDisplay.displayName = "TimeDisplay";