import styled, { keyframes } from "styled-components";

const blink = keyframes`
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
`;

interface DotProps {
  $delay: number;
}

const Dot = styled.span<DotProps>`
  animation: ${blink} 1s infinite;
  animation-delay: ${({ $delay }) => $delay}s;
  margin: 0;
`;

const Wrapper = styled.div`
  display: flex;
  gap: 4px;
`;

export const AnimDot = () => (
  <Wrapper>
    <Dot $delay={0}>.</Dot>
    <Dot $delay={0.2}>.</Dot>
    <Dot $delay={0.4}>.</Dot>
  </Wrapper>
);