mobile_adaptive_learning/lib/features/learning/widgets/section_card.dart

import 'package:english_learning/core/services/constants.dart';
import 'package:english_learning/features/learning/modules/model/section_model.dart';
import 'package:flutter/material.dart';
import 'package:english_learning/core/utils/styles/theme.dart';

class LearningCard extends StatefulWidget {
  final Section section;
  final VoidCallback? onTap;

  const LearningCard({
    super.key,
    required this.section,
    this.onTap,
  });

  @override
  State<LearningCard> createState() => _LearningCardState();
}

class _LearningCardState extends State<LearningCard>
    with SingleTickerProviderStateMixin {
  String _getFullImageUrl(String thumbnail) {
    if (thumbnail.startsWith('http')) {
      return thumbnail;
    } else {
      return '${baseUrl}api/uploads/section/$thumbnail';
    }
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: widget.onTap,
      child: Card(
        color: AppColors.whiteColor,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(12),
        ),
        elevation: 1,
        margin: const EdgeInsets.symmetric(vertical: 6.0),
        child: Padding(
          padding: const EdgeInsets.all(12.0),
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              ClipRRect(
                  borderRadius: BorderRadius.circular(8),
                  child: Image.network(
                    _getFullImageUrl(widget.section.thumbnail ?? ''),
                    width: 90,
                    height: 104,
                    fit: BoxFit.cover,
                    errorBuilder: (context, error, stackTrace) {
                      print('Error loading image: $error');
                      return Container(
                        width: 90,
                        height: 104,
                        color: Colors.grey[300],
                        child: const Icon(
                          Icons.image_not_supported,
                          color: Colors.grey,
                        ),
                      );
                    },
                    loadingBuilder: (context, child, loadingProgress) {
                      if (loadingProgress == null) return child;
                      return Container(
                        width: 90,
                        height: 104,
                        color: Colors.grey[300],
                        child: Center(child: CircularProgressIndicator()),
                      );
                    },
                  )),
              const SizedBox(width: 16),
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      widget.section.name,
                      style: AppTextStyles.blackTextStyle.copyWith(
                        fontSize: 16,
                        fontWeight: FontWeight.w900,
                      ),
                    ),
                    const SizedBox(height: 4),
                    Text(
                      widget.section.description,
                      style: AppTextStyles.disableTextStyle.copyWith(
                        fontSize: 13,
                        fontWeight: FontWeight.w500,
                      ),
                      maxLines: 4,
                      overflow: TextOverflow.ellipsis,
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}