import { useEffect, useState } from "react";
import { Link } from "react-router";

function getCurrentTime() {
  return new Date().toLocaleString();
}

export function Header() {
  const [currentTime, setCurrentTime] = useState('');

  useEffect(() => {
    const interval = setInterval(() => {
      setCurrentTime(getCurrentTime());
    }, 1000);

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

  return (
    <header className="mb-8">
      <div className="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
        <div>
          <p className="text-sm text-slate-500">
            <Link to="/">Crypto Dashboard</Link>
          </p>
          <h1 className="mt-1 text-2xl font-semibold tracking-tight sm:text-3xl">
            Next Coins
          </h1>
        </div>

        <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
          <div className="relative">
            <p>{currentTime || '\u00A0'}</p>
          </div>
        </div>
      </div>
    </header>
  );
}