import 'package:flutter/material.dart';
import '../components/html_tooltip.dart';

class ModCardExample extends StatelessWidget {
  const ModCardExample({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Mod Description Examples'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: ListView(
          children: [
            _buildExampleCard(
              'HTML Description Example',
              '<h1>My Awesome Mod</h1><p>This is a <strong>HTML</strong> description example with <em>formatting</em>.</p><p>Features:</p><ul><li>Feature 1</li><li>Feature 2</li><li>Feature 3</li></ul><p>Visit our website: <a href="https://example.com">example.com</a></p>',
              'HTML formatted mod description',
              Colors.blue.shade100,
            ),
            const SizedBox(height: 16),
            _buildExampleCard(
              'Markdown Description Example',
              '# My Cool Mod\n\nThis is a **Markdown** description with _italic_ text.\n\nFeatures:\n* Feature A\n* Feature B\n* Feature C\n\nCheck out our [website](https://example.com)',
              'Markdown formatted mod description',
              Colors.green.shade100,
            ),
            const SizedBox(height: 16),
            _buildExampleCard(
              'BBCode Description Example',
              '[h1]Amazing Mod[/h1]\n[b]This[/b] is a [i]BBCode[/i] description example.\n\n[b]Features:[/b]\n[list]\n[*]Feature X\n[*]Feature Y\n[*]Feature Z\n[/list]\n\nCheck out our site: [url=https://example.com]example.com[/url]',
              'BBCode formatted mod description',
              Colors.orange.shade100,
            ),
            const SizedBox(height: 16),
            _buildExampleCard(
              'Mixed Format Example',
              '[h1]Mixed Format Mod[/h1]\n\n# Markdown Header\n\nThis description contains <strong>HTML</strong>, **Markdown**, and [i]BBCode[/i] all mixed together.\n\n<ul><li>HTML List Item</li></ul>\n* Markdown List Item\n[list][*]BBCode List Item[/list]\n\n<a href="https://example.com">HTML Link</a>\n[Website](https://example.com)\n[url=https://example.com]BBCode Link[/url]',
              'Description with mixed formatting',
              Colors.purple.shade100,
            ),
            const SizedBox(height: 16),
            _buildExampleCard(
              'RimWorld-Style Example',
              '[h1]RimWorld Mod[/h1]\nThis mod adds several new features to enhance your RimWorld experience.\n\n[h1]Features[/h1]\n[list]\n[*]New buildings and furniture\n[*]Additional research projects\n[*]Balanced gameplay adjustments\n[/list]\n\n[h1]Compatibility[/h1]\nThis mod is compatible with:\n[list]\n[*]Core game version 1.4\n[*]Most other popular mods\n[/list]\n\n[h1]Installation[/h1]\n1. Subscribe to the mod\n2. Enable in mod menu\n3. Start a new game or load existing\n\n[h1]Credits[/h1]\nModder: YourName\nContributors: OtherPeople\n\n[h1]Links[/h1]\n[url=https://example.com/support]Support[/url] | [url=https://example.com/donate]Donate[/url]',
              'RimWorld-style mod description',
              Colors.red.shade100,
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildExampleCard(String title, String description, String tooltip, Color color) {
    return Card(
      color: color,
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Row(
              children: [
                Text(
                  title,
                  style: const TextStyle(
                    fontSize: 18,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                const SizedBox(width: 8),
                HtmlTooltip(
                  content: description,
                  maxWidth: 400,
                  maxHeight: 500,
                  child: const Icon(
                    Icons.info_outline,
                    size: 20,
                  ),
                ),
              ],
            ),
            const SizedBox(height: 8),
            Text(tooltip),
            const SizedBox(height: 16),
            const Text('Hover over the info icon to see the formatted description')
          ],
        ),
      ),
    );
  }
}