import 'package:flutter/material.dart';
import 'package:shimmer/shimmer.dart';
import 'package:glowwheels/models/shop_profile_model.dart';

class ProfileHeader extends StatelessWidget {
  final ShopProfileModel? shopProfile;

  const ProfileHeader({super.key, this.shopProfile});

  @override
  Widget build(BuildContext context) {
    if (shopProfile == null) {
      // Show skeleton loader
      return _buildSkeleton(context);
    }

    final name = shopProfile!.name;
    final phone = shopProfile!.phone;
    final email = shopProfile!.email;
    final imageUrl = (shopProfile!.images.isNotEmpty) ? shopProfile!.images.first : null;

    return Container(
      color: Colors.white,
      padding: const EdgeInsets.all(16),
      child: Row(
        children: [
          CircleAvatar(
            radius: 40,
            backgroundImage: imageUrl != null
                ? NetworkImage(imageUrl)
                : const AssetImage('assets/images/shop_image.jpg') as ImageProvider,
          ),
          const SizedBox(width: 16),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Row(
                  children: [
                    const ImageIcon(AssetImage("assets/icon/account_icon.png")),
                    const SizedBox(width: 8),
                    Expanded(
                      child: Text(
                        name,
                        style: const TextStyle(fontSize: 16, fontWeight: FontWeight.w500),
                      ),
                    ),
                  ],
                ),
                const SizedBox(height: 8),
                Row(
                  children: [
                    const ImageIcon(AssetImage("assets/icon/contact_icon.png")),
                    const SizedBox(width: 8),
                    Text(phone),
                  ],
                ),
                const SizedBox(height: 8),
                Row(
                  children: [
                    const ImageIcon(AssetImage("assets/icon/Message_icon.png")),
                    const SizedBox(width: 8),
                    Expanded(child: Text(email)),
                  ],
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildSkeleton(BuildContext context) {
    final baseColor = Colors.grey[300]!;
    final highlightColor = Colors.grey[100]!;

    return Container(
      color: Colors.white,
      padding: const EdgeInsets.all(16),
      child: Shimmer.fromColors(
        baseColor: baseColor,
        highlightColor: highlightColor,
        child: Row(
          children: [
            Container(
              width: 80,
              height: 80,
              decoration: BoxDecoration(color: baseColor, shape: BoxShape.circle),
            ),
            const SizedBox(width: 16),
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Container(height: 20, color: baseColor, margin: const EdgeInsets.only(bottom: 12)),
                  Container(height: 16, width: 150, color: baseColor, margin: const EdgeInsets.only(bottom: 12)),
                  Container(height: 16, width: 200, color: baseColor),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}