Build a {{component_type}} for {{product_context}} using React, Tailwind CSS, and shadcn/ui. What it shows and does: {{component_details}} Visual direction: {{visual_style}} Requirements: - Responsive from a 320px phone screen to a wide desktop, with no horizontal scrolling - Every relevant state designed: default, hover, focus, loading, empty, error, and disabled - Accessible: semantic HTML, visible focus, full keyboard support, labels on icon-only buttons, and WCAG AA color contrast - Works in light and dark mode - Typed props and realistic sample data instead of placeholder text After the code, list the props with a one-line description of each, any assumptions you made, and two design variations worth trying.