import { getPercentageBetween } from 'utils';

export type UserQuota = {
  id: string;
  description: string;
  current: number;
  limit: number;
};

interface QuotasProps {
  data: UserQuota[];
}

export const Quotas = ({ data }: QuotasProps) => {
  return (
    <div className="spacingY2">
      {data.map((quota, i) => {
        const width = getPercentageBetween(quota.current, 0, quota.limit) + '%';

        return (
          <div className="fz14" key={i}>
            <div className="flex justifyBetween" key={quota.id}>
              <div>{quota.description}</div>
              <div>
                {quota.current} / {quota.limit}
              </div>
            </div>
            <div className="marginY2 bg-grayA02 rounded oh">
              <div
                className={quota.current < quota.limit ? 'bg-blue' : 'bg-red'}
                style={{
                  maxWidth: '100%',
                  width: width,
                  height: 8,
                }}
              ></div>
            </div>
          </div>
        );
      })}
    </div>
  );
};