import * as React from 'react';
import Link from 'next/link';

interface TagProps {
  tag: string;
  index: number;
  className?: string;
}

export const Tag: React.FC<TagProps> = ({ tag, className = '' }) => {
  return (
    <Link
      href={`/tags/${tag}`}
      className={`inline-block text-[10px] font-bold uppercase tracking-[0.2em] text-slate-500 bg-white border border-slate-200 px-4 py-2 rounded-full hover:border-slate-400 hover:text-slate-900 hover:bg-slate-50 transition-all duration-500 ease-[cubic-bezier(0.23,1,0.32,1)] hover:-translate-y-0.5 hover:shadow-lg hover:shadow-slate-100 ${className}`}
    >
      {tag}
    </Link>
  );
};
