import clsx from 'clsx'
import { type PropsWithChildren } from 'react'

import { type SelectColor } from '@/lib/notion/types'

export default function Tag({
  notionColorName,
  children,
}: PropsWithChildren<{ notionColorName?: SelectColor }>) {
  return (
    <span
      className={clsx(
        notionColorName && `notion-color-${notionColorName}`,
        'whitespace-nowrap rounded bg-[var(--light-bg)] py-1 px-2 text-[var(--light-text)] dark:bg-[var(--dark-bg)] dark:text-[var(--dark-text)]',
      )}
    >
      {children}
    </span>
  )
}