import { formatTagTextContent, formatTagUsage } from '../../functions/Format'
import type { BackendTag } from '../../functions/BackendTypes'
import { routeIntercept } from '../../functions/Route'
import './styles/SidebarItemTag.css'

export default function SidebarItemTag({ id, label, usage }: BackendTag) {
    return (
        <a className="item-tag" href={`/search?tag=${id}`} onClick={routeIntercept}>
            <span className="label animation-scroll-in">{formatTagTextContent(label)}</span>
            <span className="usage animation-fade-in">{formatTagUsage(usage)}</span>
        </a>
    )
}
