import React from 'react';
import styled, { useTheme } from 'styled-components';

const Loading = () => {
  const theme = useTheme();

  return (
    <LoadingWrapper>
      <svg
        width="48"
        height="48"
        viewBox="0 0 48 48"
        xmlns="http://www.w3.org/2000/svg"
        stroke={theme.primary}
      >
        <g fill="none" fillRule="evenodd">
          <g transform="translate(4 4)" strokeWidth="8">
            <circle strokeOpacity=".5" cx="18" cy="18" r="18" />
            <path d="M36 18c0-9.94-8.06-18-18-18">
              <animateTransform
                attributeName="transform"
                type="rotate"
                from="0 18 18"
                to="360 18 18"
                dur="1s"
                repeatCount="indefinite"
              />
            </path>
          </g>
        </g>
      </svg>
    </LoadingWrapper>
  );
};

export default Loading;

const LoadingWrapper = styled.div`
  margin: 64px auto;
`;