import 'package:flutter/material.dart';

import '../../../../../../common/theme/theme.dart';
import '../../../../../../sample/sample_data.dart';
import '../../../../../components/image/image.dart';

class HomePopularMerchantCard extends StatelessWidget {
  final MerchantModel merchant;
  final VoidCallback? onTap;

  const HomePopularMerchantCard({
    super.key,
    this.onTap,
    required this.merchant,
  });

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onTap,
      child: Container(
        margin: const EdgeInsets.only(bottom: 12),
        padding: const EdgeInsets.all(12),
        decoration: BoxDecoration(
          color: AppColor.surface,
          borderRadius: BorderRadius.circular(12),
          boxShadow: [
            BoxShadow(
              color: AppColor.black.withOpacity(0.06),
              blurRadius: 8,
              offset: const Offset(0, 2),
            ),
          ],
        ),
        child: Row(
          children: [
            // Image Container
            Container(
              width: 60,
              height: 60,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(8),
                color: AppColor.border,
              ),
              child: ClipRRect(
                borderRadius: BorderRadius.circular(8),
                child: merchant.imageUrl.startsWith('http')
                    ? Image.network(
                        merchant.imageUrl,
                        width: 60,
                        height: 60,
                        fit: BoxFit.cover,
                        errorBuilder: (context, error, stackTrace) {
                          return ImagePlaceholder(width: 60, height: 60);
                        },
                      )
                    : Image.asset(
                        merchant.imageUrl,
                        width: 60,
                        height: 60,
                        fit: BoxFit.cover,
                        errorBuilder: (context, error, stackTrace) {
                          return ImagePlaceholder(width: 60, height: 60);
                        },
                      ),
              ),
            ),

            const SizedBox(width: 12),

            // Title and Category
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    merchant.name,
                    style: AppStyle.md.copyWith(
                      fontWeight: FontWeight.w600,
                      height: 1.2,
                    ),
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                  ),

                  const SizedBox(height: 4),

                  Text(
                    merchant.category,
                    style: AppStyle.sm.copyWith(color: AppColor.textSecondary),
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                  ),
                ],
              ),
            ),

            const SizedBox(width: 8),

            // Rating and Status
            Column(
              crossAxisAlignment: CrossAxisAlignment.end,
              children: [
                // Status Badge
                Container(
                  padding: const EdgeInsets.symmetric(
                    horizontal: 6,
                    vertical: 2,
                  ),
                  decoration: BoxDecoration(
                    color: merchant.isOpen ? AppColor.success : AppColor.error,
                    borderRadius: BorderRadius.circular(6),
                  ),
                  child: Text(
                    merchant.isOpen ? 'OPEN' : 'CLOSED',
                    style: AppStyle.xs.copyWith(
                      color: AppColor.textWhite,
                      fontWeight: FontWeight.w600,
                      fontSize: 10,
                    ),
                  ),
                ),

                const SizedBox(height: 8),

                // Rating
                Container(
                  padding: const EdgeInsets.symmetric(
                    horizontal: 6,
                    vertical: 3,
                  ),
                  decoration: BoxDecoration(
                    color: AppColor.primary.withOpacity(0.1),
                    borderRadius: BorderRadius.circular(6),
                  ),
                  child: Row(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      Icon(Icons.star, size: 12, color: AppColor.warning),
                      const SizedBox(width: 2),
                      Text(
                        merchant.rating.toString(),
                        style: AppStyle.xs.copyWith(
                          fontWeight: FontWeight.w600,
                          color: AppColor.primary,
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}
