React Chip Component with Deletion

This challenge asks you to implement a reusable React chip component. Chips are commonly used in user interfaces to represent tags, categories, or selectable items, often with the ability to be removed. This component will allow users to easily manage a list of items in a visually appealing and interactive way.

Problem Description

You need to create a Chip component in React using TypeScript. The component should display a label and an optional deletion icon. When the user clicks the deletion icon, the component should trigger a callback function provided as a prop, indicating that the chip should be removed. The component should be styled to look like a pill-shaped chip.

Key Requirements:

• Label: The chip must display a text label provided via a label prop.
• Deletion Icon: The chip must include a visually distinct icon (e.g., an "X") that indicates it can be deleted.
• onDelete Callback: The chip must accept an onDelete prop, which is a function that will be called when the deletion icon is clicked. This function should receive the chip's index in the parent component's list as an argument.
• Styling: The chip should have a pill-shaped appearance with appropriate padding and a background color. The deletion icon should be positioned clearly within the chip.
• Accessibility: The deletion icon should be accessible (e.g., using aria-label).

Expected Behavior:

• When the component renders, it displays the label and deletion icon.
• When the deletion icon is clicked, the onDelete callback function is executed with the chip's index.
• The component should be reusable and adaptable to different labels and styling.

Edge Cases to Consider:

• What happens if onDelete is not provided? (Should it still render, or throw an error?) Assume it should render, but log a warning to the console.
• How should the component handle long labels that might overflow the chip? (Consider truncation or scrolling). For this challenge, truncation is acceptable.
• Consider the visual appearance of the chip when the label is very short.

Examples

Example 1:

Input:
<Chip label="React" onDelete={() => console.log("React deleted")} index={0} />
Output:
A chip displaying "React" with a deletion icon. Clicking the icon logs "React deleted" to the console.
Explanation: The component renders the label and icon, and the onDelete function is called when the icon is clicked.

Example 2:

Input:
<Chip label="TypeScript" onDelete={() => console.log("TypeScript deleted")} index={1} />
Output:
A chip displaying "TypeScript" with a deletion icon. Clicking the icon logs "TypeScript deleted" to the console.
Explanation: Similar to Example 1, but with a different label and index.

Example 3: (Edge Case - No onDelete)

Input:
<Chip label="JavaScript" index={2} />
Output:
A chip displaying "JavaScript" with a deletion icon. Clicking the icon does nothing (and a warning is logged to the console).
Explanation: The component renders, but the onDelete function is not provided, so no action is taken when the icon is clicked. A console warning is logged.

Constraints

• The component must be written in TypeScript.
• The styling should be done using CSS (either inline styles or a CSS file).
• The deletion icon can be a simple character (e.g., "X") or a more complex icon from a library like Font Awesome (though using a simple character is preferred for this challenge).
• The component should be reasonably performant. Avoid unnecessary re-renders.
• The index prop must be a number.

Notes

• Consider using functional components and hooks.
• Think about how to make the component configurable (e.g., allowing users to customize the deletion icon or styling).
• Focus on creating a clean, well-structured, and reusable component.
• The truncation of long labels is acceptable. No need to implement scrolling.
• The index prop is crucial for the parent component to identify which chip is being deleted.
• Remember to handle the case where onDelete is not provided gracefully.