import React from 'react';

interface KeywordBubbleProps {
  text: string;
}

export const KeywordBubble: React.FC<KeywordBubbleProps> = ({ text }) => {
  return (
    <div className="bg-brand-cardHover/50 border border-brand-accent/20 rounded-full px-4 py-2 text-sm text-brand-text shadow-sm hover:border-brand-accent hover:text-brand-accent hover:bg-brand-accent/5 transition-all duration-300 cursor-default whitespace-nowrap">
      # {text}
    </div>
  );
};