import { css } from '@emotion/react';

const TOTAL_STEPS = 5;
const TDS_BLUE = '#3182F6';
const STEP_ORANGE = '#FF6B35';
const STEP_GRAY = 'rgba(255, 255, 255, 0.3)';

interface TutorialProgressBarProps {
  step: number; // 0-based, 0 = Step 1 welcome card
}

const containerStyle = css`
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
`;

const textStyle = css`
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  font-weight: 500;
`;

const dotsStyle = css`
  display: flex;
  gap: 6px;
  align-items: center;
`;

const dotStyle = (state: 'done' | 'current' | 'todo') => css`
  width: ${state === 'current' ? 10 : 8}px;
  height: ${state === 'current' ? 10 : 8}px;
  border-radius: 50%;
  background: ${state === 'done' ? TDS_BLUE : state === 'current' ? STEP_ORANGE : STEP_GRAY};
  transition: all 0.2s ease;
`;

export function TutorialProgressBar({ step }: TutorialProgressBarProps) {
  // step 0 = welcome card (Step 1), step 1 = Step 2, etc.
  const displayStep = step + 1;

  return (
    <div css={containerStyle}>
      <span css={textStyle}>{displayStep} / {TOTAL_STEPS}</span>
      <div css={dotsStyle}>
        {Array.from({ length: TOTAL_STEPS }, (_, i) => {
          const state = i < step ? 'done' : i === step ? 'current' : 'todo';
          return <div key={i} css={dotStyle(state)} />;
        })}
      </div>
    </div>
  );
}
