import type { ClickableProps } from '~/src/components/Clickable';

import ClickableWithSpacing from '~/src/components/Clickable';
import Tag from '~/src/components/Tag';

export const RoundedTag = ({
  testId,
  text,
  isSelected,
  ...clickableProps
}: {
  text: Parameters<typeof Tag>[0]['text'];
  isSelected: boolean;
} & ClickableProps) => (
  <ClickableWithSpacing
    testId={testId}
    width="auto"
    fullHeight
    {...clickableProps}
  >
    <Tag
      text={text}
      highlighted={isSelected}
      rounded
      fullHeight
      size="1.2rem"
      padding="0.3rem 0.6rem"
    />
  </ClickableWithSpacing>
);