import React from 'react';

import Pill from './Pill';

interface AvailableLanguagesPillProps {
  count: number;
  size?: 'sm' | 'md';
}

function AvailableLanguagesPill({
  count,
  size = 'md',
}: AvailableLanguagesPillProps): JSX.Element | null {
  if (count <= 1) return null;

  return (
    <Pill tone="info" size={size}>
      {`Available in ${count} languages`}
    </Pill>
  );
}

export default AvailableLanguagesPill;