Create a Reusable Badge Component in React with TypeScript

This challenge focuses on building a versatile badge component in React using TypeScript. Badges are commonly used in user interfaces to display information, status, or achievements in a visually distinct way. This component will be designed to be reusable and customizable, accepting various props to control its appearance and content.

Problem Description

You are tasked with creating a Badge component in React using TypeScript. The component should display a label and an optional icon. It should be highly customizable through props, allowing users to control the badge's appearance (color, size, border) and content (label, icon). The component should be reusable across different parts of an application.

Key Requirements:

• Label Prop: A required prop that accepts a string representing the text to be displayed within the badge.
• Icon Prop: An optional prop that accepts a React node (e.g., an SVG, an image, or a text character) to be displayed within the badge.
• Color Prop: An optional prop that accepts a string representing the background color of the badge (e.g., "red", "#FF0000"). Defaults to a sensible default (e.g., "blue").
• Size Prop: An optional prop that accepts a string representing the size of the badge (e.g., "small", "medium", "large"). This should affect the font size and padding. Defaults to "medium".
• Border Prop: An optional prop that accepts a boolean value. If true, the badge should have a border. Defaults to false.
• Styling: The component should be styled using CSS (either inline styles or a CSS-in-JS library is acceptable).
• TypeScript: The component must be written in TypeScript, with proper type definitions for all props.

Expected Behavior:

The component should render a visually appealing badge with the provided label and optional icon. The badge's appearance should be controlled by the props passed to it. The component should handle cases where the icon prop is not provided gracefully.

Edge Cases to Consider:

• Empty label string. Should still render, displaying an empty badge.
• Invalid color values. Should gracefully handle invalid color strings (e.g., by defaulting to the default color).
• Different icon types (SVG, image, text). The component should be able to render any valid React node as an icon.
• Size prop values other than "small", "medium", or "large". Should default to "medium".

Examples

Example 1:

Input: <Badge label="New" />
Output: A blue badge displaying the text "New".
Explanation:  The component renders with the default color ("blue") and size ("medium").

Example 2:

Input: <Badge label="Verified" color="green" />
Output: A green badge displaying the text "Verified".
Explanation: The component renders with the specified color ("green") and default size ("medium").

Example 3:

Input: <Badge label="Alert" icon={<span role="img" aria-label="warning">⚠️</span>} color="red" size="large" border={true} />
Output: A large, red badge with a border, displaying the warning emoji and the text "Alert".
Explanation: The component renders with the specified color ("red"), size ("large"), border (true), and an emoji icon.

Example 4:

Input: <Badge label="" />
Output: A blue badge displaying an empty string.
Explanation: Handles the edge case of an empty label.

Constraints

• The component should be implemented as a functional component using React Hooks.
• The component should be well-structured and easy to understand.
• The component should be reusable and customizable.
• The component should be responsive and look good on different screen sizes (basic responsiveness is sufficient).
• The component should not rely on external CSS libraries (e.g., Bootstrap, Material-UI) for core styling. You can use CSS-in-JS or standard CSS.

Notes

Consider using CSS variables to manage the badge's styling. Think about how to make the component's size prop affect both the font size and padding. Pay attention to accessibility – ensure the badge is readable and provides appropriate semantic meaning. The icon prop should be rendered safely within the badge.