import React from 'react';

export const Header = () => {
  return (
    <header className="header">
      <div className="row">
        <img src="daily-logo.svg" alt="Daily" className="logo" />
        <div className="capsule">Prebuilt demo</div>
      </div>
      <div className="row">
        <div className="capsule">
          <a href="https://docs.daily.co/docs/">API docs</a>
        </div>
        <span className="divider"></span>
        <img
          src="github-logo.png"
          alt="Ocotocat"
          className="logo octocat"
          href="https://github.com/daily-demos/examples/tree/main/prebuilt-ui/basic-embed"
        />
      </div>
      <style jsx>{`
        .header {
          display: flex;
          flex: 0 0 auto;
          padding: var(--spacing-sm);
          align-items: center;
          width: 100%;
          justify-content: space-between;
          position: fixed;
        }

        .row {
          display: flex;
          align-items: center;
        }

        .logo {
          margin-right: var(--spacing-xs);
        }

        .octocat {
          width: 24px;
          height: 24px;
          margin-left: var(--spacing-xxs);
        }

        .capsule {
          display: flex;
          align-items: center;
          gap: var(--spacing-xxxs);
          background-color: var(--blue-dark);
          border-radius: var(--radius-sm);
          padding: var(--spacing-xxs) var(--spacing-xs);
          box-sizing: border-box;
          line-height: 1;
          font-weight: var(--weight-medium);
          user-select: none;
          margin-right: var(--spacing-xxs);
          color: var(--text-reverse);
        }

        .capsule a {
          text-decoration: none;
          color: var(--text-reverse);
        }

        .divider {
          background: var(--gray-light);
          margin: 0 var(--spacing-xxs);
          height: 32px;
          width: 1px;
        }

        @media only screen and (max-width: 750px) {
          .header {
            display: none;
          }
        }
      `}</style>
    </header>
  );
};

export default Header;