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

'use client';

import { Play, Pause } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { fmt } from '@/lib/game/store';
import { formatHour } from '@/lib/game/formatting';

interface TimeDisplayProps {
  day: number;
  hour: number;
  insight: number;
  paused: boolean;
  onTogglePause: () => void;
}

export function TimeDisplay({
  day,
  hour,
  insight,
  paused,
  onTogglePause,
}: 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>
      
      <Button
        variant="ghost"
        size="sm"
        onClick={onTogglePause}
        className="text-gray-400 hover:text-white"
      >
        {paused ? <Play className="w-4 h-4" /> : <Pause className="w-4 h-4" />}
      </Button>
    </div>
  );
}