import 'package:flutter/material.dart';
import 'package:flutter_modular/flutter_modular.dart';


import 'package:design_system/design_system.dart';
import 'package:core_localization/core_localization.dart';
import 'package:krow_core/core.dart';


/// Card widget for displaying pending payment information, using design system tokens.
class PendingPaymentCard extends StatelessWidget {
  /// Creates a [PendingPaymentCard].
  const PendingPaymentCard({super.key});

  @override
  Widget build(BuildContext context) {
    final pendingI18n = t.staff.home.pending_payment;
    return GestureDetector(
      onTap: () => Modular.to.toPayments(),
      child: Container(
        padding: const EdgeInsets.all(UiConstants.space4),
        decoration: BoxDecoration(
          gradient: LinearGradient(
            colors: [UiColors.primary.withOpacity(0.08), UiColors.primary.withOpacity(0.04)],
            begin: Alignment.centerLeft,
            end: Alignment.centerRight,
          ),
          borderRadius: BorderRadius.circular(UiConstants.radiusBase),
          border: Border.all(color: UiColors.primary.withOpacity(0.12)),
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Expanded(
              child: Row(
                children: [
                  Container(
                    width: 40,
                    height: 40,
                    decoration: const BoxDecoration(
                      color: UiColors.bgHighlight,
                      shape: BoxShape.circle,
                    ),
                    child: const Icon(
                      UiIcons.dollar,
                      color: UiColors.primary,
                      size: 20,
                    ),
                  ),
                  const SizedBox(width: UiConstants.space3),
                  Expanded(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          pendingI18n.title,
                          style: UiTypography.body1b,
                          overflow: TextOverflow.ellipsis,
                        ),
                        Text(
                          pendingI18n.subtitle,
                          style: UiTypography.body3r.copyWith(color: UiColors.mutedForeground),
                          overflow: TextOverflow.ellipsis,
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
            Row(
              children: [
                Text(
                  '\$285.00',
                  style: UiTypography.headline4m,
                ),
                SizedBox(width: UiConstants.space2),
                Icon(
                  UiIcons.chevronRight,
                  color: UiColors.mutedForeground,
                  size: 20,
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}
