import { VariantProps } from "class-variance-authority"
import { Typography } from "../Typography"
import { variants } from "./variants"
import { MaterialIcon } from "../Icons/MaterialIcon"

interface ImageCounterProps extends VariantProps<typeof variants> {
  number: number | string
  leadingIcon?: boolean
  className?: string
}

export function ImageCounter({
  number,
  size,
  leadingIcon = false,
  className,
}: ImageCounterProps) {
  const classNames = variants({ className, size })
  return (
    <Typography variant="Tag/sm">
      <span className={classNames}>
        {leadingIcon && (
          <MaterialIcon icon="filter" color="Icon/Inverted" size={16} />
        )}
        {number}
      </span>
    </Typography>
  )
}