import Pills from '@design-system/Pills';
import Skeleton from '@design-system/Skeleton';

import { type HeaderPillProps } from './types';

const HeaderPill = ({ label, loading, pillProps }: HeaderPillProps) => {
  if (loading)
    return (
      <Skeleton
        width={78}
        height={40}
      />
    );
  if (!label) return null;

  return (
    <Pills
      hasIcon={false}
      size="small"
      label={label}
      {...pillProps}
    />
  );
};

export default HeaderPill;
