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

//function reverseString(str: string): string {
//  return str.split('').reverse().join('');
//}

const ScreenTimeCanvas: React.FC = () => {
  const [currentDateTime, setCurrentDateTime] = useState<string>('');
  //const [reversedDateTime, setReversedDateTime] = useState<string>('');

  useEffect(() => {
    const updateDateTime = () => {
      const now = new Date();
      const formatted = now.toLocaleString("ja-JP", {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
      });
      setCurrentDateTime(formatted);
      //setReversedDateTime(reverseString(formatted));
    };
    updateDateTime();
    const timer = setInterval(updateDateTime, 1000);
    return () => clearInterval(timer);
  }, []);

  return (
    <div className="time">
      <p>{currentDateTime}</p>
    </div>
  );
};

export default ScreenTimeCanvas;
