import 'package:didvan/views/news/news_state.dart';
import 'package:didvan/views/widgets/didvan/slider.dart';
import 'package:didvan/views/widgets/skeleton_image.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

/// بنرهای دسته‌ی فعلی (اقتصادی، سیاسی، فناوری، …) را در صفحه‌ی «دنیای فولاد»
/// نمایش می‌دهد. هر بنر یک تصویر است که از body محتوای bnnaer در content-service
/// (یا signed URL از s3-service) می‌آید.
class NewsBanner extends StatelessWidget {
  const NewsBanner({super.key});

  @override
  Widget build(BuildContext context) {
    final state = context.watch<NewsState>();
    final banners = state.bannersForCurrentSelection;
    if (banners.isEmpty) {
      return const SizedBox.shrink();
    }
    final width = MediaQuery.of(context).size.width;
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
      child: DidvanSlider(
        itemBuilder: (context, index, realIndex) {
          final item = banners[index];
          final image = item.coverImage ?? '';
          return GestureDetector(
            onTap: () {
              // اگه content link مشخصی نداشت کاری نکن (preview از طریق tap روی
              // تصویر در آینده اضافه می‌شه).
            },
            child: ClipRRect(
              borderRadius: BorderRadius.circular(12),
              child: image.isEmpty
                  ? const SizedBox.shrink()
                  : SkeletonImage(
                      imageUrl: image,
                      borderRadius: BorderRadius.circular(12),
                    ),
            ),
          );
        },
        itemCount: banners.length,
        viewportFraction: 1,
        enableIndicator: banners.length > 1,
        height: (width - 32) * 9.0 / 16.0,
      ),
    );
  }
}