Create AIMetadataDisplay component for blog posts

[amiable-dev]

We need to create a reusable React component to display AI metadata on blog posts.

Requirements:

1. Create AIMetadataDisplay component that shows:
   • AI models used (with versions and tasks)
   • Confidence scores
   • Tools used
   • Review process
   • Quality metrics

Technical Implementation:

• Create src/components/AIMetadataDisplay/index.jsx
• Implement tooltip functionality for explanations
• Use shadcn/ui Card components
• Add proper type definitions
• Support dark/light mode
• Handle optional fields gracefully

Component Features:

• Conditional rendering based on ai_generated flag
• Styled with Tailwind CSS
• Tooltips for explaining metrics
• Responsive design
• Accessible markup

Testing:

• Test with various metadata combinations
• Verify dark/light mode styling
• Check accessibility
• Test responsiveness

Documentation:

• Add component usage examples
• Document props and types
• Add comments for complex logic
• Include example metadata structure