import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

class AttractionsListView extends StatefulWidget {
  final List<Map<String, String>> attractions;

  const AttractionsListView({super.key, required this.attractions});

  @override
  State<AttractionsListView> createState() => _AttractionsListViewState();
}

class _AttractionsListViewState extends State<AttractionsListView> {
  final ScrollController _scrollController = ScrollController();
  double _scrollProgress = 0.0;

  @override
  void initState() {
    super.initState();
    _scrollController.addListener(_updateScrollProgress);
  }

  @override
  void dispose() {
    _scrollController.dispose();
    super.dispose();
  }

  void _updateScrollProgress() {
    if (!_scrollController.hasClients ||
        _scrollController.position.maxScrollExtent == 0) return;
    setState(() {
      _scrollProgress = (_scrollController.offset /
          _scrollController.position.maxScrollExtent)
          .clamp(0.0, 1.0);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        SizedBox(
          height: 240,
          child: ListView.builder(
            controller: _scrollController,
            scrollDirection: Axis.horizontal,
            padding: const EdgeInsets.only(left: 16),
            itemCount: widget.attractions.length,
            itemBuilder: (context, index) {
              final item = widget.attractions[index];
              return Container(
                alignment: Alignment.center,
                margin: const EdgeInsets.only(right: 16),
                padding: const EdgeInsets.all(4),
                decoration: BoxDecoration(
                  border: Border.all(
                    color: const Color(0xFFF95F62).withOpacity(0.24),
                  ),
                  borderRadius: BorderRadius.circular(16),
                ),
                child: Container(
                  height: 232,
                  width: 161,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(16),
                    image: DecorationImage(
                      image: AssetImage(item['image']!),
                      fit: BoxFit.cover,
                    ),
                  ),
                  alignment: Alignment.bottomLeft,
                  padding: const EdgeInsets.all(12),
                  child: Text(
                    item['title']!,
                    style: GoogleFonts.poppins(
                      color: Colors.white,
                      fontWeight: FontWeight.w600,
                      fontSize: 14,
                    ),
                  ),
                ),
              );
            },
          ),
        ),
        const SizedBox(height: 20),
        Align(
          alignment: Alignment.center,
          child: SizedBox(
            width: 200,
            child: ClipRRect(
              borderRadius: BorderRadius.circular(10),
              child: LinearProgressIndicator(
                value: _scrollProgress,
                minHeight: 6,
                backgroundColor: const Color(0xffFEE7E7),
                color: const Color(0xffF95F62),
              ),
            ),
          ),
        ),
      ],
    );
  }
}
