Build a Product Card Component

Problem/Feature Description

An e-commerce store needs a reusable product card component for their catalog page. Build it using React and TypeScript.

The card should display:

• Product image -- from a URL
• Product name -- prominently displayed
• Price -- formatted as currency (e.g., "$29.99")
• Short description -- 1-2 sentences about the product
• "Add to Cart" button -- triggers a callback when clicked

The component should accept props:

interface ProductCardProps {
  id: string;
  name: string;
  imageUrl: string;
  price: number;
  description: string;
  onAddToCart: (id: string) => void;
}

Design requirements:

• Card has a subtle shadow and rounded corners
• Image fills the top of the card
• Hover effect on the card (slight lift)
• Button changes color on hover
• Responsive: cards should look good at various widths

Output Specification

Produce:

• src/components/ProductCard.tsx -- the product card component
• src/components/ProductCard.css -- styles for the card