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

class PaymentHistoryItem extends StatelessWidget {

  const PaymentHistoryItem({
    super.key,
    required this.amount,
    required this.title,
    required this.location,
    required this.address,
    required this.date,
    required this.workedTime,
    required this.hours,
    required this.rate,
    required this.status,
  });
  final double amount;
  final String title;
  final String location;
  final String address;
  final String date;
  final String workedTime;
  final int hours;
  final double rate;
  final String status;

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(UiConstants.space4),
      decoration: BoxDecoration(
        color: UiColors.white,
        borderRadius: BorderRadius.circular(UiConstants.radiusBase),
        boxShadow: <BoxShadow>[
          BoxShadow(
            color: UiColors.black.withValues(alpha: 0.05),
            blurRadius: 2,
            offset: const Offset(0, 1),
          ),
        ],
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          // Status Badge
          Row(
            children: <Widget>[
              Container(
                width: 6,
                height: 6,
                decoration: const BoxDecoration(
                  color: UiColors.primary,
                  shape: BoxShape.circle,
                ),
              ),
              const SizedBox(width: 6),
              Text(
                "PAID",
                style: UiTypography.titleUppercase4b.copyWith(
                  color: UiColors.primary,
                ),
              ),
            ],
          ),
          const SizedBox(height: UiConstants.space3),

          Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              // Icon
              Container(
                width: 44,
                height: 44,
                decoration: BoxDecoration(
                  color: UiColors.secondary,
                  borderRadius: BorderRadius.circular(UiConstants.radiusBase),
                ),
                child: const Icon(
                  UiIcons.chart,
                  color: UiColors.mutedForeground,
                  size: 24,
                ),
              ),
              const SizedBox(width: UiConstants.space3),

              // Content
              Expanded(
                child: Column(
                  children: <Widget>[
                    Row(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: <Widget>[
                        Expanded(
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: <Widget>[
                              Text(
                                title,
                                style: UiTypography.body2b.textPrimary,
                              ),
                              Text(
                                location,
                                style: UiTypography.body3r.textSecondary,
                              ),
                            ],
                          ),
                        ),
                        Column(
                          crossAxisAlignment: CrossAxisAlignment.end,
                          children: <Widget>[
                            Text(
                              "\$${amount.toStringAsFixed(0)}",
                              style: UiTypography.headline4m.textPrimary,
                            ),
                            Text(
                              "\$${rate.toStringAsFixed(0)}/hr · ${hours}h",
                              style: UiTypography.footnote1r.textSecondary,
                            ),
                          ],
                        ),
                      ],
                    ),
                    const SizedBox(height: UiConstants.space2),

                    // Date and Time
                    Row(
                      children: <Widget>[
                        const Icon(
                          UiIcons.calendar,
                          size: 12,
                          color: UiColors.mutedForeground,
                        ),
                        const SizedBox(width: UiConstants.space2),
                        Text(
                          date,
                          style: UiTypography.body3r.textSecondary,
                        ),
                        const SizedBox(width: UiConstants.space2),
                        const Icon(
                          UiIcons.clock,
                          size: 12,
                          color: UiColors.mutedForeground,
                        ),
                        const SizedBox(width: UiConstants.space2),
                        Text(
                          workedTime,
                          style: UiTypography.body3r.textSecondary,
                        ),
                      ],
                    ),
                    const SizedBox(height: 1),

                    // Address
                    Row(
                      children: <Widget>[
                        const Icon(
                          UiIcons.mapPin,
                          size: 12,
                          color: UiColors.mutedForeground,
                        ),
                        const SizedBox(width: UiConstants.space2),
                        Expanded(
                          child: Text(
                            address,
                            style: UiTypography.body3r.textSecondary,
                            maxLines: 1,
                            overflow: TextOverflow.ellipsis,
                          ),
                        ),
                      ],
                    ),
                  ],
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}
