import React from 'react';
import { useGameStore } from '../../store/gameState';

export const Dashboard: React.FC = () => {
  const { week, day, anomaly, political, trust, entropy } = useGameStore();

  return (
    <div className="w-full bg-gray-800 border-b border-gray-600 p-3 flex flex-col gap-2 shrink-0">
      <div className="flex justify-between items-center text-sm font-bold border-b border-gray-700 pb-1">
        <span>Week {week}</span>
        <span>Day {day} / 5</span>
      </div>

      <div className="grid grid-cols-2 gap-2 mt-1">
        <div className="bg-gray-700 p-2 rounded flex flex-col items-center">
          <span className="text-xs text-gray-400">Data (Anomaly)</span>
          <span className="text-lg font-mono text-blue-300">{anomaly}</span>
        </div>
        <div className="bg-gray-700 p-2 rounded flex flex-col items-center">
          <span className="text-xs text-gray-400">Pol. Capital</span>
          <span className="text-lg font-mono text-yellow-400">{political}</span>
        </div>
      </div>

      <div className="flex flex-col gap-1 mt-1">
        <div className="flex justify-between items-center text-xs">
          <span className="text-gray-400">Trust</span>
          <span>{trust}%</span>
        </div>
        <div className="w-full h-2 bg-gray-900 rounded overflow-hidden">
          <div className="h-full bg-green-500" style={{ width: `${trust}%` }}></div>
        </div>

        <div className="flex justify-between items-center text-xs mt-1">
          <span className="text-gray-400">Entropy</span>
          <span>{entropy}%</span>
        </div>
        <div className="w-full h-2 bg-gray-900 rounded overflow-hidden">
          <div className="h-full bg-red-500" style={{ width: `${entropy}%` }}></div>
        </div>
      </div>
    </div>
  );
};