import 'package:flutter/material.dart';

import 'package:pweb/widgets/sidebar/destinations.dart';

import 'package:pweb/generated/i18n/app_localizations.dart';


class UserProfileCard extends StatelessWidget {
  final ThemeData theme;
  final String? avatarUrl;
  final String? userName;
  final PayoutDestination selected;
  final void Function(PayoutDestination) onSelected;

  const UserProfileCard({
    super.key,
    required this.theme,
    required this.avatarUrl,
    required this.userName,
    required this.selected,
    required this.onSelected,
  });

  @override
  Widget build(BuildContext context) {
    final loc = AppLocalizations.of(context)!;
    bool isSelected = selected == PayoutDestination.settings; 
    final backgroundColor = isSelected
        ? theme.colorScheme.primaryContainer
        : Colors.transparent;

    return Material(
      elevation: 4,
      borderRadius: BorderRadius.circular(14),
      color: theme.colorScheme.onSecondary,
      child: InkWell(
        borderRadius: BorderRadius.circular(14),
        onTap: () => onSelected(PayoutDestination.settings),
        child: Container(
          height: 80,
          width: 320,
          decoration: BoxDecoration(
            color: backgroundColor,
            borderRadius: BorderRadius.circular(14),
          ),
          padding: const EdgeInsets.only(top: 15.0, left: 30, right: 20, bottom: 15),
          child: Row(
            spacing: 5,
            children: [
              CircleAvatar(
                radius: 20,
                foregroundImage: avatarUrl != null ? NetworkImage(avatarUrl!) : null,
                child: avatarUrl == null ? const Icon(Icons.person, size: 28) : null,
              ),
              const SizedBox(width: 8),
              Flexible(
                child: Text(
                  userName ?? loc.userNamePlaceholder,
                  style: theme.textTheme.bodyLarge?.copyWith(
                    fontSize: 20,
                    fontWeight: FontWeight.w500,
                  ),
                  maxLines: 2,
                  overflow: TextOverflow.ellipsis,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}