import 'package:absensi_sas_flutter/app/constant.dart';
import 'package:absensi_sas_flutter/screen/widget/real_date.dart';
import 'package:absensi_sas_flutter/screen/widget/real_time.dart';
import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: [

            SizedBox(
              height: Constant.getActualYPhone(context: context, y: 44),
            ),

            //Card Time
            Padding(
              padding: EdgeInsets.only(
                left: Constant.getActualXPhone(context: context, x: 33),
                right:Constant.getActualXPhone(context: context, x: 27),
              ),
              child: Container(
                child: Card(
                  elevation: 16,
                  child: Container(
                    width: Constant.getActualXPhone(context: context, x: 330),
                    height: Constant.getActualYPhone(context: context, y: 200),
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(40),
                      image: DecorationImage(
                        image: AssetImage('images/card_bg_1.png'), // Ganti dengan path gambar Anda
                        fit: BoxFit.cover, // Sesuaikan cara gambar ditampilkan
                      ),
                    ),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        // Date
                        Padding(
                          padding: EdgeInsets.only(
                            top: Constant.getActualYPhone(context: context, y: 16),
                            left: Constant.getActualXPhone(context: context, x: 83.5),
                            right:Constant.getActualXPhone(context: context, x: 83.5),
                          ),
                          child: RealTimeFormattedDate(),
                        ),
                        SizedBox(height: Constant.getActualYPhone(context: context, y: 8),),
              
                        //Time
                        RealTimeClock(), // Menampilkan waktu real-time menggunakan RealTimeClock
                        
                        SizedBox(height: Constant.getActualYPhone(context: context, y: 20),),
                        Row(
                          mainAxisAlignment: MainAxisAlignment.center, // Menengahkan secara horizontal
                          children: [
                            Spacer(), // Spasi di sebelah kiri "Check In"
                            Column(
                              children: [
                                Image.asset(
                                  'images/finger_tap.png', // Path gambar untuk "Check In"
                                  width: Constant.getActualXPhone(context: context, x:22),
                                  height: Constant.getActualYPhone(context: context, y: 22),
                                ),
                              
                                SizedBox(
                                  height: Constant.getActualYPhone(context: context, y: 8),
                                ),
                                
                                Text(
                                  '--:--',
                                  style: TextStyle(
                                    // Atur gaya teks '--:--' sesuai kebutuhan
                                  ),
                                ),
                                Text(
                                  'Clock In',
                                  style: Constant.titleH2_700(context: context).copyWith(
                                      color: Constant.textLightGrey,
                                  ),
                                ),
                              ],
                            ),
                            
                            SizedBox(width: Constant.getActualXPhone(context: context, x: 96),), // Jarak antara "Check In" dan "Check Out"
              
                            Column(
                              children: [
                                Image.asset(
                                  'images/finger_tap.png', // Path gambar untuk "Check Out"
                                  width: Constant.getActualXPhone(context: context, x:22),
                                  height: Constant.getActualYPhone(context: context, y: 22),
                                ),
                                SizedBox(
                                  height: Constant.getActualYPhone(context: context, y: 8),
                                ),
                                Text(
                                  '--:--',
                                  style: TextStyle(
                                    // Atur gaya teks '--:--' sesuai kebutuhan
                                  ),
                                ),
                                Text(
                                  'Clock Out',
                                  style: Constant.titleH2_700(context: context).copyWith(
                                      color: Constant.textLightGrey,
                                  ),
                                ),
                              ],
                            ),
                            Spacer(), // Spasi di sebelah kanan "Check Out"
                          ],
                        ),
                        SizedBox(
                          height: Constant.getActualYPhone(context: context, y: 16),
                        ),
                      ],
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}