import React from "react";

interface LoaderProps {
    className?: string;
}

export const Loader: React.FC<LoaderProps> = ({ className = "" }) => {
    return (
        <>
            <style>{`
        .pl {
          width: 8em;
          height: 8em;
        }

        .pl circle {
          transform-box: fill-box;
          transform-origin: 50% 50%;
        }

        .pl__ring2 {
          animation: ring2_ 4s 0.04s ease-in-out infinite;
        }

        .pl__ring4 {
          animation: ring4_ 4s 0.12s ease-in-out infinite;
        }

        .pl__ring6 {
          animation: ring6_ 4s 0.2s ease-in-out infinite;
        }

        @keyframes ring2_ {
          from {
            stroke-dashoffset: -329.207488554;
            transform: rotate(-0.25turn);
            animation-timing-function: ease-in;
          }
          23% {
            stroke-dashoffset: -82.46680575;
            transform: rotate(1turn);
            animation-timing-function: ease-out;
          }
          46%, 50% {
            stroke-dashoffset: -329.207488554;
            transform: rotate(2.25turn);
            animation-timing-function: ease-in;
          }
          73% {
            stroke-dashoffset: -82.46680575;
            transform: rotate(3.5turn);
            animation-timing-function: ease-out;
          }
          96%, to {
            stroke-dashoffset: -329.207488554;
            transform: rotate(4.75turn);
          }
        }

        @keyframes ring4_ {
          from {
            stroke-dashoffset: -253.9600625988;
            transform: rotate(-0.25turn);
            animation-timing-function: ease-in;
          }
          23% {
            stroke-dashoffset: -63.61725015;
            transform: rotate(1turn);
            animation-timing-function: ease-out;
          }
          46%, 50% {
            stroke-dashoffset: -253.9600625988;
            transform: rotate(2.25turn);
            animation-timing-function: ease-in;
          }
          73% {
            stroke-dashoffset: -63.61725015;
            transform: rotate(3.5turn);
            animation-timing-function: ease-out;
          }
          96%, to {
            stroke-dashoffset: -253.9600625988;
            transform: rotate(4.75turn);
          }
        }

        @keyframes ring6_ {
          from {
            stroke-dashoffset: -203.795111962;
            transform: rotate(-0.25turn);
            animation-timing-function: ease-in;
          }
          23% {
            stroke-dashoffset: -51.05087975;
            transform: rotate(1turn);
            animation-timing-function: ease-out;
          }
          46%, 50% {
            stroke-dashoffset: -203.795111962;
            transform: rotate(2.25turn);
            animation-timing-function: ease-in;
          }
          73% {
            stroke-dashoffset: -51.05087975;
            transform: rotate(3.5turn);
            animation-timing-function: ease-out;
          }
          96%, to {
            stroke-dashoffset: -203.795111962;
            transform: rotate(4.75turn);
          }
        }

        .loader-center {
          display: flex;
          align-items: center;
          justify-content: center;
        }
      `}</style>

            <div className={`loader-center ${className}`}>
                <svg
                    className="pl"
                    viewBox="0 0 128 128"
                    xmlns="http://www.w3.org/2000/svg"
                >
                    {/* Ring 2 */}
                    <circle
                        className="pl__ring2"
                        cx="64"
                        cy="64"
                        r="52.5"
                        fill="none"
                        stroke="hsl(240,92%,19%)"
                        strokeWidth="12"
                        transform="rotate(-90,64,64)"
                        strokeLinecap="round"
                        strokeDasharray="329.9 329.9"
                        strokeDashoffset="-329.3"
                    />

                    {/* Ring 4 */}
                    <circle
                        className="pl__ring4"
                        cx="64"
                        cy="64"
                        r="37.5"
                        fill="none"
                        stroke="hsl(13,90%,55%)"
                        strokeWidth="9"
                        transform="rotate(-90,64,64)"
                        strokeLinecap="round"
                        strokeDasharray="254.5 254.5"
                        strokeDashoffset="-254"
                    />

                    {/* Ring 6 */}
                    <circle
                        className="pl__ring6"
                        cx="64"
                        cy="64"
                        r="22.5"
                        fill="none"
                        stroke="hsl(47,99%,49%)"
                        strokeWidth="9"
                        transform="rotate(-90,64,64)"
                        strokeLinecap="round"
                        strokeDasharray="204.2 204.2"
                        strokeDashoffset="-203.9"
                    />
                </svg>
            </div>
        </>
    );
};