import React from 'react';
import { Tooltip } from '@/components/ui/Tooltip';
import { jobTypeLabel, jobTypeDescription } from '@/lib/gsc-job-type-labels';
import styles from './JobTypePill.module.css';

interface Props {
  type: string;
}

export function JobTypePill({ type }: Props) {
  return (
    <Tooltip
      content={
        <>
          <strong>{type}</strong>
          <br />
          {jobTypeDescription(type)}
        </>
      }
    >
      <span className={styles.pill}>{jobTypeLabel(type)}</span>
    </Tooltip>
  );
}