components/PillLink.tsx

import Link from 'next/link';
import { Badge } from '@/components/ui/badge';

interface PillLinkProps {
  text: string;
  link: string;
  isNew?: boolean;
  newText?: string;
}

const PillLink: React.FC<PillLinkProps> = ({ text, link, isNew = false, newText = 'NEW' }) => {
  return (
    <Link href={link}>
      <Badge 
        className="
          mb-4 bg-red-500 px-2 py-1 text-xs font-medium text-white shadow-sm 
          transition-all duration-200 
          hover:bg-red-600 
          transform hover:scale-105
        "
      >
        {isNew || newText && (
          <span className="mr-1 rounded bg-white px-1 py-0.5 text-[10px] font-bold text-red-500">
            {newText}
          </span>
        )}
        {text}
      </Badge>
    </Link>
  );
};

export default PillLink;