import 'package:flutter/material.dart';

import '../../../../app/theme/mapflow_theme.dart';
import '../../domain/place_models.dart';

class PlacePhotoCard extends StatelessWidget {
  const PlacePhotoCard({super.key, required this.place, required this.onTap});

  final PlaceRecommendation place;
  final VoidCallback onTap;

  @override
  Widget build(BuildContext context) {
    final tokens = context.mapflowTokens;
    final colorScheme = Theme.of(context).colorScheme;

    return GestureDetector(
      onTap: onTap,
      child: Container(
        width: 150,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(tokens.panelRadius),
          border: Border.all(color: colorScheme.surface),
          boxShadow: [
            BoxShadow(
              color: tokens.mapShadow,
              blurRadius: 16,
              offset: const Offset(0, 8),
            ),
          ],
        ),
        clipBehavior: Clip.antiAlias,
        child: Stack(
          fit: StackFit.expand,
          children: [
            if (place.photoUrls.isEmpty)
              ColoredBox(
                color: colorScheme.primary,
                child: Icon(Icons.place_outlined, color: colorScheme.onPrimary),
              )
            else
              PageView.builder(
                itemCount: place.photoUrls.length,
                itemBuilder: (context, index) {
                  return Image.network(
                    place.photoUrls[index],
                    fit: BoxFit.cover,
                    errorBuilder: (_, _, _) => ColoredBox(
                      color: tokens.mapPanelBorder,
                      child: const Icon(Icons.place_outlined),
                    ),
                  );
                },
              ),
            DecoratedBox(
              decoration: BoxDecoration(
                gradient: LinearGradient(
                  begin: Alignment.topCenter,
                  end: Alignment.bottomCenter,
                  colors: [Colors.transparent, tokens.imageScrim],
                ),
              ),
            ),
            Positioned(
              left: 10,
              right: 10,
              bottom: 12,
              child: Text(
                place.name,
                maxLines: 2,
                overflow: TextOverflow.ellipsis,
                style: TextStyle(
                  color: tokens.onDark,
                  fontWeight: FontWeight.w900,
                  height: 1.05,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}