"use client";

type AtayaLoaderProps = {
  size?: number;
};

export default function AtayaLoader({ size = 96 }: AtayaLoaderProps) {
  const ringSizePx = `${size}px`;
  const fontSizePx = `${Math.max(14, Math.round(size / 5))}px`;

  return (
    <>
      <div className="loader-root">
        <div className="loader">
          <div className="ring" />
          <div className="brand">Ataya</div>
        </div>
      </div>

      <style jsx>{`
        :root {
          --green: #0fa958;
          --gray: #cfd3d1;
        }

        .loader-root {
          width: 100%;
          height: 100%;
          display: grid;
          place-items: center;
          padding: 1.5rem 0;
        }

        .loader {
          width: ${ringSizePx};
          height: ${ringSizePx};
          position: relative;
          display: grid;
          place-items: center;
        }

        .ring {
          position: absolute;
          inset: 0;
          border-radius: 50%;
        }

        .ring::before {
          content: "";
          position: absolute;
          inset: 0;
          border-radius: 50%;
          border: 1px solid gray;
        }

        .ring::after {
          content: "";
          position: absolute;
          inset: 0;
          border-radius: 50%;
          border: 3px solid transparent;
          border-top-color: green;
          border-left-color: green;
          animation: spin 2s linear infinite;
        }

        .brand {
          position: absolute;
          inset: 0;
          display: grid;
          place-items: center;
          font-size: ${fontSizePx};
          font-weight: 600;
          color: var(--green);
          letter-spacing: 0.5px;
          user-select: none;
        }

        @keyframes spin {
          to {
            transform: rotate(360deg);
          }
        }
      `}</style>
    </>
  );
}