import React from 'react';

interface PlanDotsProps {
  /** Filled dots, out of ten. */
  filled: number;
  /** Brand for an agent row, dark for the Audit and Plan row. */
  tone: 'agent' | 'audit';
}

const DOTS = Array.from({ length: 10 }, (_, index) => index);

/**
 * Ten squares, the first `filled` of them lit: how hard a row runs on the
 * plan, the way recomaze.ai/pricing draws it.
 */
export const PlanDots = ({ filled, tone }: PlanDotsProps): JSX.Element => (
  <div className="grid grid-cols-10 gap-1.5" aria-label={`${filled} of 10`}>
    {DOTS.map(index => (
      <i
        key={index}
        className={[
          'block aspect-square rounded-[5px] border transition-colors duration-300',
          index < filled
            ? tone === 'audit'
              ? 'border-foreground bg-primary'
              : 'border-brand bg-brand'
            : 'border-border bg-muted',
        ].join(' ')}
      />
    ))}
  </div>
);