import React from 'react';
import classNames from 'classnames';

interface Props {
  tag: string;
  size?: 'small' | 'medium' | 'large';
  classes?: string;
}

export function TagBlock(props: Props) {
  const { tag, size = 'small', classes } = props;
  const href = `/tag/${tag}`;

  return (
    <a
      href={href}
      style={{ width: 'min-content' }}
      className={classNames(
        'flex items-center cursor-pointer rounded-full whitespace-nowrap border border-secondary bg-secondary bg-opacity-25 text-primary font-thin',
        size === 'small' && 'h-4 text-xs',
        size === 'medium' && 'h-5 text-sm',
        size === 'medium' && 'h-6 text-base',
        classes,
      )}
    >
      <span className="px-2">{tag}</span>
    </a>
  );
}