import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:percent_indicator/percent_indicator.dart';
import 'package:easycook_mobile/pages/detail_resep.dart';

class RiwayatMasakanPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Riwayat Masakan'),
        centerTitle: true,
        foregroundColor: Colors.black,
        backgroundColor: Colors.white,
        elevation: 0.5,
      ),
      body: Container(
        padding: EdgeInsets.only(top: 24, left: 16, right: 16),
        width: double.infinity,
        child: Column(
          children: [
            Row(
              children: [
                _cardResep(context),
                Spacer(),
                _cardResep(context),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

Widget _cardResep(BuildContext context) {
  return InkWell(
    onTap: () {
      // Navigator.push(
      //   context,
      //   MaterialPageRoute(
      //     builder: (context) => DetailResepPage(),
      //   ),
      // );
    },
    child: Container(
      width: 156,
      height: 216,
      padding: const EdgeInsets.only(top: 8, right: 8, left: 8, bottom: 16),
      decoration: BoxDecoration(
        image: DecorationImage(
          image: AssetImage('images/card_bg.png'),
          fit: BoxFit.fitHeight,
        ),
      ),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Row(
            children: [
              // Rating
              SvgPicture.asset('assets/icons/Star 1.svg'),
              SizedBox(
                width: 4,
              ),
              Text(
                '4/5',
                style: GoogleFonts.montserrat().copyWith(
                  fontSize: 10,
                  color: Colors.white,
                  fontWeight: FontWeight.bold,
                ),
              ),
              const Spacer(),
              // Like Button
              OutlinedButton(
                onPressed: () {},
                child: const Icon(
                  Icons.favorite,
                  color: Colors.amber,
                ),
                style: OutlinedButton.styleFrom(
                  shape: CircleBorder(),
                  backgroundColor: Colors.white,
                  side: BorderSide(color: Colors.amber),
                ),
              ),
            ],
          ),
          const Spacer(),
          Text(
            'Tumis Sawi dengan Terasi',
            style: GoogleFonts.montserrat().copyWith(
              color: Colors.white,
              fontSize: 12,
              fontWeight: FontWeight.w900,
            ),
          ),
          Align(
            alignment: Alignment.centerLeft,
            child: Text(
              'kelengkapan bahan',
              style: GoogleFonts.montserrat().copyWith(
                color: Colors.white,
                fontSize: 10,
              ),
            ),
          ),
          Row(
            children: [
              LinearPercentIndicator(
                width: 100.0,
                lineHeight: 8.0,
                percent: 0.8,
                backgroundColor: Colors.white,
                progressColor: Colors.orange,
              ),
              Spacer(),
              Text(
                '80 %',
                style: GoogleFonts.montserrat().copyWith(
                  color: Colors.orange,
                ),
              ),
            ],
          ),
        ],
      ),
    ),
  );
}