import React, { useState, useEffect } from 'react';

const ASCIIDigits = {
  0: [
    "███ ",
    "██",
    "█   █",
    "█   █",
    " ███ "
  ],
  1: [
    "█  ",
    " ██  ",
    "  █  ",
    "  █  ",
    " ███ "
  ],
  2: [
    " ███ ",
    "█   █",
    "█ ",
    " █   ",
    "█████"
  ],
  3: [
    " ███ ",
    "█   █",
    "██ ",
    "█   █",
    " ███ "
  ],
  4: [
    "█   █",
    "█   █",
    "█████",
    "    █",
    "    █"
  ],
  5: [
    "█████",
    "█",
    "████ ",
    "    █",
    "████ "
  ],
  6: [
    " ███ ",
    "█    ",
    "████ ",
    "█   █",
    " ███ "
  ],
  7: [
    "█████",
    "   █ ",
    "  █  ",
    " █   ",
    "█    "
  ],
  8: [
    " ███ ",
    "█   █",
    " ███ ",
    "█   █",
    " ███ "
  ],
  9: [
    " ███ ",
    "█   █",
    " ████",
    "    █",
    " ███ "
  ],
  ':': [
    "",
    "  █  ",
    "",
    "  █  ",
    "     "
  ]
};

const ASCIITime = ({ time }) => {
  const digits = time.split('').map((digit, index) => (
    <pre key={index} style={{ display: 'inline-block', margin: '0 4px', fontSize: '16px', lineHeight: '1' }}>
      {ASCIIDigits[digit].join('\n')}
    </pre>
  ));

  return<div>{digits}</div>;
};

const App = () => {
  const [time, setTime] = useState('');

  useEffect(() => {
    const timer = setInterval(() => {
      const date = new Date();
      setTime(date.toLocaleTimeString('en-US', { hour12: false }));
    }, 1000);

    return () => clearInterval(timer);
  }, []);

  return (
    <div style={{
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center',
      justifyContent: 'center',
      height: '100vh',
      backgroundColor: '#282c34',
      color: '#61dafb',
      fontFamily: 'monospace'
    }}>
      <h1 style={{ marginBottom: '20px' }}>ASCII Time Display</h1>
      <ASCIITime time={time} />
    </div>
  );
};

export default App;