import Link from 'next/link'
import React from 'react'

import { cn } from '@/utilities/ui'

type TagBadgeProps = {
  tag: { title: string; slug: string }
  size?: 'sm' | 'md'
  linked?: boolean
}

export const TagBadge: React.FC<TagBadgeProps> = ({ tag, size = 'md', linked = true }) => {
  const cls = cn(
    'inline-block rounded-full border border-border px-2.5 py-0.5 font-medium transition-colors hover:bg-accent hover:text-accent-foreground',
    size === 'sm' ? 'text-[10px] px-2 py-0' : 'text-xs',
  )

  if (linked) {
    return (
      <Link href={`/tags/${tag.slug}`} className={cls}>
        {tag.title}
      </Link>
    )
  }

  return <span className={cls}>{tag.title}</span>
}