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

class GetYourPassCard extends StatelessWidget {
  const GetYourPassCard({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 14),
      decoration: BoxDecoration(
        color: const Color(0xFFFFF1F1),
        borderRadius: BorderRadius.circular(40),
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          // ===== Left Section =====
          Row(
            children: [
              // Left texts and overlapping images
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    "Get your Pass",
                    style: GoogleFonts.poppins(
                      fontSize: 16,
                      fontWeight: FontWeight.w600,
                      color: Colors.black,
                    ),
                  ),
                  const SizedBox(height: 6),
                  Row(
                    children: [
                      // Stacked circular attraction images
                      AttractionsAvatarStack(imagePath: 'assets/images/get_your_pass_bg.jpg',),
                      const SizedBox(width: 8),
                      Text(
                        "Attractions",
                        style: GoogleFonts.poppins(
                          fontSize: 13,
                          color: Colors.black87,
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ],
          ),

          // ===== Right Section =====
          Row(
            children: [
              Column(
                crossAxisAlignment: CrossAxisAlignment.end,
                children: [
                  Text(
                    "From",
                    style: GoogleFonts.poppins(
                      fontSize: 12,
                      color: Colors.black87,
                    ),
                  ),
                  Text.rich(
                    TextSpan(
                      children: [
                        TextSpan(
                          text: "\$20",
                          style: GoogleFonts.poppins(
                            fontSize: 14,
                            fontWeight: FontWeight.w700,
                            color: Colors.black,
                          ),
                        ),
                        TextSpan(
                          text: " /Adult",
                          style: GoogleFonts.poppins(
                            fontSize: 13,
                            color: Colors.black87,
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
              const SizedBox(width: 12),
              // Circular Arrow Button
              Container(
                padding: const EdgeInsets.all(10),
                decoration: const BoxDecoration(
                  color: Color(0xffF95F62),
                  shape: BoxShape.circle,
                ),
                child: const Icon(
                  Icons.arrow_forward,
                  color: Colors.white,
                  size: 18,
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

class AttractionsAvatarStack extends StatelessWidget {
  const AttractionsAvatarStack({
    super.key,
    required this.imagePath, // from your assets/figma
    this.size = 26,          // circle diameter
    this.count = 4,          // total circles including the last “16+”
    this.overlap = 8,        // how much they overlap
    this.moreText = '16+',
  });

  final String imagePath;
  final double size;
  final int count;
  final double overlap;
  final String moreText;

  @override
  Widget build(BuildContext context) {
    final step = size - overlap; // horizontal step between circles
    return SizedBox(
      width: size + (count - 1) * step,
      height: size,
      child: Stack(
        clipBehavior: Clip.none,
        children: List.generate(count, (i) {
          final left = i * step;
          final isLast = i == count - 1;

          return Positioned(
            left: left,
            child: _AvatarCircle(
              size: size,
              imagePath: imagePath,
              showOverlayText: isLast,
              overlayText: moreText,
            ),
          );
        }),
      ),
    );
  }
}

class _AvatarCircle extends StatelessWidget {
  const _AvatarCircle({
    required this.size,
    required this.imagePath,
    this.showOverlayText = false,
    this.overlayText = '16+',
  });

  final double size;
  final String imagePath;
  final bool showOverlayText;
  final String overlayText;

  @override
  Widget build(BuildContext context) {
    return Container(
      width: size,
      height: size,
      padding: const EdgeInsets.all(1.5), // white ring thickness
      decoration: const BoxDecoration(
        shape: BoxShape.circle,
        color: Colors.white, // ring color
      ),
      child: ClipOval(
        child: Stack(
          fit: StackFit.expand,
          children: [
            Image.asset(imagePath, fit: BoxFit.cover),
            if (showOverlayText)
              Container(
                color: Colors.black.withOpacity(0.35),
                alignment: Alignment.center,
                child: Text(
                  overlayText,
                  style: const TextStyle(
                    color: Colors.white,
                    fontSize: 11,
                    fontWeight: FontWeight.w700,
                  ),
                ),
              ),
          ],
        ),
      ),
    );
  }
}

