import React from 'react';

interface KeywordBubbleProps {
  text: string;
}

const KeywordBubble: React.FC<KeywordBubbleProps> = ({ text }) => (
  <span className="px-4 py-2 rounded-full bg-brand-cardHover/80 text-brand-text text-xs font-semibold tracking-tight border border-brand-muted/20 shadow-sm hover:border-brand-accent/50 hover:text-brand-accent transition">
    {text}
  </span>
);

export default KeywordBubble;
