Chart - Copy this React, Tailwind Component to your project

# Chart Component Prompt (MVC Pattern Functional, Built with Recharts) ## Context Design a **Chart** component for a React application using TypeScript and the MVC pattern. The component should support creating visually appealing and dynamic charts using **Recharts**. It should be flexible to adapt to various types of data visualizations, such as bar charts, line charts, and pie charts. ## Goals 1. Implement the **MVC pattern** in a functional style to manage data, rendering, and user interactions. 2. Provide a reusable and customizable chart component that supports multiple chart types and configurations. 3. Ensure responsiveness and accessibility for users. ## MVC Design Breakdown ### Model The **model** will handle the chart's data, configuration, and dynamic updates (e.g., filtering, highlighting). ### View The **view** will render the chart using Recharts, adapting to the provided data and styles. ### Controller The **controller** will handle interactions, such as tooltip display, legend updates, and user triggered data changes. ## Props Interface ```typescript interface ChartProps { type: 'line' | 'bar' | 'pie' | 'area'; // Type of chart to render data: Record<string, unknown>[]; // Data to be visualized dataKey: string; // Key for the data values to display xAxisKey?: string; // Key for the x axis values (if applicable) yAxisKey?: string; // Key for the y axis values (if applicable) title?: string; // Title for the chart colors?: string[]; // Custom colors for the chart series legend?: boolean; // Whether to display a legend (default: true) tooltip?: boolean; // Whether to display tooltips (default: true) onClickDataPoint?: (data: Record<string, unknown>) => void; // Callback when a data point is clicked responsive?: boolean; // Whether the chart should adapt to screen size (default: true) }