import { gray300, gray800 } from '@/styles/colors';
import { keyframes } from '@emotion/react';
import styled from '@emotion/styled';

const Container = styled.div`
  display: flex;
  flex-direction: row;
  gap: 2px;
`;

const fadeUp = (index: number) => keyframes`
    0% { transform: translateY(${index * 3 + 10}px); opacity: 0; }
    66% { opacity: 0.5; }
    100% { transform: translateY(0); opacity: 1; }
`;

const DigitContainer = styled.div<{ index: number }>`
  padding: 2px 4px;
  background: ${gray300};
  color: ${gray800};

  p {
    font-size: 18px;
    margin: 0;
    padding: 0;
    animation: ${(props) => fadeUp(props.index)} ${(props) => props.index * 0.2}s ease;
  }

  @media screen and (max-width: 500px) {
    p {
      font-size: 12px;
    }
  }
`;

const Digit = ({ digit }: { digit: string }) => {
  return <p key={digit}>{digit}</p>;
};

const PlayCounter = ({ count }: { count: number }) => {
  const DIGITS = 8;
  let countStr = String(count);
  if (countStr.length < DIGITS) {
    countStr = '0'.repeat(DIGITS - countStr.length) + countStr;
  }

  return (
    <Container>
      {countStr.split('').map((char, i) => (
        <DigitContainer key={i} index={i}>
          <Digit digit={char} />
        </DigitContainer>
      ))}
    </Container>
  );
};

export default PlayCounter;