import 'package:flutter/material.dart';

import '../../domain/user_profile.dart';

/// Small color-coded label that names the user's role. Used in the profile
/// header so the role is glanceable on phone widths.
class RoleChip extends StatelessWidget {
  const RoleChip({super.key, required this.role});

  final UserRole role;

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    final scheme = theme.colorScheme;

    final (Color background, Color foreground, IconData icon, String label) =
        switch (role) {
          UserRole.admin => (
            scheme.primary.withValues(alpha: 0.18),
            scheme.primary,
            Icons.verified_user_outlined,
            'ADMIN',
          ),
          UserRole.manager => (
            Colors.amber.withValues(alpha: 0.18),
            Colors.amber.shade300,
            Icons.shield_outlined,
            'MANAGER',
          ),
          UserRole.player => (
            Colors.green.withValues(alpha: 0.18),
            Colors.green.shade300,
            Icons.sports_soccer,
            'PLAYER',
          ),
          UserRole.viewer => (
            scheme.surfaceContainerHighest,
            scheme.onSurfaceVariant,
            Icons.visibility_outlined,
            'VIEWER',
          ),
        };

    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
      decoration: BoxDecoration(
        color: background,
        borderRadius: BorderRadius.circular(20),
      ),
      child: Row(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          Icon(icon, size: 14, color: foreground),
          const SizedBox(width: 6),
          Text(
            label,
            style: theme.textTheme.labelMedium?.copyWith(
              color: foreground,
              fontWeight: FontWeight.w800,
              letterSpacing: 1.2,
            ),
          ),
        ],
      ),
    );
  }
}