import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import '../widgets/gradient_line.dart';
import '../widgets/status_circle.dart';

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

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.symmetric(horizontal: 18, vertical: 10),
      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 14),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(22),
        boxShadow: const [
          BoxShadow(
            color: Colors.black26,
            blurRadius: 12,
            offset: Offset(0, 6),
          ),
        ],
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          /// ✅ TITLE
          const Text(
            "يوم عمل",
            textAlign: TextAlign.right,
            style: TextStyle(
              fontSize: 20,
              fontWeight: FontWeight.bold,
            ),
          ),

          const SizedBox(height: 16),

          /// ✅ ICONS + TEXT UNDER EACH ICON
          Row(
            children: [
              /// ✅ MONEY
              _StatusItem(
                color: const Color(0xFFD16400),
                icon: SvgPicture.asset('assets/images/money3.svg', width: 20),
                label: "سعر كلي\n18,250 د.ع",
              ),

              const Expanded(
                child: GradientLine(
                  start: Color(0xFFD16400),
                  end: Color(0xFF1266A8),
                ),
              ),

              /// ✅ TIME
              _StatusItem(
                color: const Color(0xFF1266A8),
                icon: SvgPicture.asset('assets/images/watch.svg', width: 20),
                label: "عدد ساعات\n5.50",
              ),

              const Expanded(
                child: GradientLine(
                  start: Color(0xFF1266A8),
                  end: Color(0xFFB00000),
                ),
              ),

              /// ✅ LOGOUT
              _StatusItem(
                color: const Color(0xFFB00000),
                icon: SvgPicture.asset('assets/images/out.svg', width: 20),
                label: "خروج\n1:14pm",
              ),

              const Expanded(
                child: GradientLine(
                  start: Color(0xFFB00000),
                  end: Color(0xFF0A8F6B),
                ),
              ),

              /// ✅ LOGIN
              _StatusItem(
                color: const Color(0xFF0A8F6B),
                icon: SvgPicture.asset('assets/images/in.svg', width: 20),
                label: "دخول\n1:14pm",
              ),
            ],
          ),

          const SizedBox(height: 12),

          /// ✅ DIVIDER
          const Divider(color: Colors.black38),

          /// ✅ BOTTOM INFO
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: const [
              Text("2025.12.1", style: TextStyle(fontSize: 12)),
              Text("ملاحظات ان وجدت", style: TextStyle(fontSize: 12)),
            ],
          ),
        ],
      ),
    );
  }
}

/// ✅ REUSABLE STATUS ITEM (CIRCLE + TEXT UNDER IT)
class _StatusItem extends StatelessWidget {
  final Color color;
  final Widget icon;
  final String label;

  const _StatusItem({
    required this.color,
    required this.icon,
    required this.label,
  });

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        StatusCircle(color: color, icon: icon),
        const SizedBox(height: 6),
        Text(
          label,
          textAlign: TextAlign.center,
          style: const TextStyle(fontSize: 12),
        ),
      ],
    );
  }
}