refactor: enhance currency badge interaction and styling

- Updated the Badge component to improve user interaction with currency removal.
- Enhanced styling for better visual feedback on hover and click actions.
- Simplified the removal button functionality by integrating it into the Badge component.

src/components/tool/currency.tsx

@@ -376,21 +376,22 @@ const Tool: FC = () => {
               <Badge
                 key={code}
                 variant={isRequired ? "default" : "secondary"}
-                className="gap-1 pr-1"
-              >
-                <span>{currency?.symbol} {code}</span>
-                {!isRequired && (
-                  <button
-                    type="button"
-                    className="ml-1 rounded-sm opacity-70 hover:opacity-100 hover:text-destructive transition-opacity"
-                    onClick={(e) => {
-                      e.preventDefault();
-                      e.stopPropagation();
+                className={`relative gap-1 px-2.5 py-1 transition-all duration-200 ${
+                  !isRequired 
+                    ? "cursor-pointer hover:bg-destructive hover:text-destructive-foreground hover:border-destructive group" 
+                    : ""
+                }`}
+                onClick={() => {
+                  if (!isRequired) {
                     removeCurrency(code);
+                  }
                 }}
               >
-                    <X className="size-3 pointer-events-auto" />
-                  </button>
+                <span className={!isRequired ? "group-hover:opacity-0 transition-opacity duration-200" : ""}>
+                  {currency?.symbol} {code}
+                </span>
+                {!isRequired && (
+                  <X className="absolute inset-0 m-auto size-4 opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none" />
                 )}
               </Badge>
             );