Description

Implement a tabbed interface and a detailed stats chart for the Pokémon details page. The chart should display base stats and ability-modified stats, allowing users to select different abilities to see how they affect the Pokémon's stats.

Expected Behavior

• Implement two tabs:
  • "Details" tab: Shows abilities and base stats in a simple list format
  • "Stats Chart" tab: Displays an interactive bar chart comparing base stats vs ability-modified stats
• Stats Chart should:
  • Show side-by-side comparison of base stats and ability-modified stats
  • Allow users to select different abilities to see their effects on stats
  • Display ability description when selected
  • Show stat totals and net changes
  • Include helpful tooltips with detailed stat information

Visualization Requirements

The chart should:

1. Show base stats as blue bars
2. Show ability-modified stats as purple bars
3. Calculate and display the total stat changes
4. Provide tooltips explaining:
   • Base stat value
   • Modified stat value
   • Percentage change
   • Ability effect description

For example, if a Pokémon with 100 Attack has "Huge Power":

• Blue bar shows 100 (base)
• Purple bar shows 200 (modified)
• Tooltip shows "+100 (+100%)"
• Effect description explains "Doubles Attack stat"

Technical Requirements

Tab Implementation

• Implement a tabbed interface with two tabs:
  • Details tab with an info icon
  • Stats Chart tab with a trending up icon
• Tabs should:
  • Support smooth transitions
  • Preserve state during component lifecycle
  • Follow the existing UI patterns in the application