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

const consoleContainerStyle: React.CSSProperties = {
  marginTop: '2rem',
  padding: '1rem',
  backgroundColor: '#1a1a1a',
  borderRadius: '0.5rem',
  maxHeight: '200px',
  overflowY: 'auto',
}

const messageStyle: React.CSSProperties = {
  color: '#e0e0e0',
  fontSize: '0.9rem',
  marginBottom: '0.5rem',
  fontFamily: 'monospace',
}

const timestampStyle: React.CSSProperties = {
  color: '#666',
  marginRight: '0.5rem',
}

export const Console: React.FC = () => {
  const messages = useGameStore((state) => state.consoleMessages)

  return (
    <div style={consoleContainerStyle}>
      {messages.map((message) => (
        <div key={message.id} style={messageStyle}>
          <span style={timestampStyle}>
            {new Date(message.timestamp).toLocaleTimeString()}
          </span>
          {message.text}
        </div>
      ))}
      {messages.length === 0 && (
        <div style={messageStyle}>No messages yet...</div>
      )}
    </div>
  )
}