import React, { type FC } from 'react';
import styled from '@emotion/styled';

const BarsSpinnerBox = styled.div<{ bars: number }>`
	position: relative;
	width: 35px;
	height: 35px;

	& > div {
		position: absolute;
		width: 2px;
		height: 8px;
		background-color: #25363f;
		opacity: 0.05;
		animation: fadeit 0.8s linear infinite;
	}

	${({ bars }: { bars: number }) =>
		Array(bars)
			.fill(null)
			.map(
				(_, i) => `
  & > div:nth-child(${i + 1}) {
    transform: rotate(${((360 / bars) * i).toFixed(2)}deg) translate(0, -12px);
    animation-delay:${((0.8 / bars) * (i + 1)).toFixed(2)}s;
  }
  `,
			)} @keyframes fadeit {
		0% {
			opacity: 1;
		}
		100% {
			opacity: 0;
		}
	}
`;

export const BarsSpinner: FC<{ bars?: number }> = ({ bars = 16 }) => {
	return (
		<BarsSpinnerBox bars={bars}>
			{Array(bars)
				.fill(null)
				.map((_, i) => (
					<div key={i} />
				))}
		</BarsSpinnerBox>
	);
};