import 'package:fast_network_navigation/structs/landmark.dart';
import 'package:flutter/material.dart';


class LandmarkCard extends StatefulWidget {
  final Landmark landmark;
  @override
  _LandmarkCardState createState() => _LandmarkCardState();

  LandmarkCard(this.landmark);

}

class _LandmarkCardState extends State<LandmarkCard> {
  @override
  Widget build(BuildContext context) {
    ThemeData theme = Theme.of(context);
    return Container(
      height: 160,
      child: Card(
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(15.0),
        ),
        elevation: 5,
        clipBehavior: Clip.antiAliasWithSaveLayer,
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Container( // the image on the left
              // inherit the height of the parent container
              height: double.infinity,
              // force a fixed width
              width: 160,
              child: Image.network(
                widget.landmark.imageURL ?? '',
                errorBuilder: (context, error, stackTrace) => Icon(Icons.question_mark_outlined),
                // TODO: make this a switch statement to load a placeholder if null
                // cover the whole container meaning the image will be cropped
                fit: BoxFit.cover,
              ),
            ),
            Flexible(
              child: Padding(
                padding: EdgeInsets.all(10),
                child: Column(
                  children: [
                    Row(
                      children: [
                        Flexible(
                          child: Text(
                            widget.landmark.name,
                            style: const TextStyle(
                              fontSize: 18,
                              fontWeight: FontWeight.bold,
                            ),
                            maxLines: 2,
                          ),
                        )
                      ],
                    ),
                    Row(
                      children: [
                        Flexible(
                          child: Text(
                            "${widget.landmark.name} (${widget.landmark.type.name})",
                            style: const TextStyle(fontSize: 14),
                          ),
                        )
                      ]
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}