import './header.css';

import useSteps from '../../../hooks/palmistry/use-steps';

import HeaderLogo from '../header-logo/header-logo';

export default function Home() {
  const steps = useSteps();

  return (
    <header className="header">
      {!steps.isWelcome && (
        <div className="header__button-wrapper" onClick={steps.goBack}>
          <svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path
              d="M19.7676 12.3203H5.76758"
              stroke="#000000"
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round"
            />
            <path
              d="M12.7676 19.3203L5.76758 12.3203L12.7676 5.32031"
              stroke="#000000"
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round"
            />
          </svg>
        </div>
      )}

      <HeaderLogo/>
    </header>
  );
}