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

/// An individual item within the profile menu grid.
///
/// Uses design system tokens for all colors, typography, spacing, and borders.
class ProfileMenuItem extends StatelessWidget {
  final IconData icon;
  final String label;
  final bool? completed;
  final VoidCallback? onTap;

  const ProfileMenuItem({
    super.key,
    required this.icon,
    required this.label,
    this.completed,
    this.onTap,
  });

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onTap,
      child: Container(
        decoration: BoxDecoration(
          color: UiColors.bgPopup,
          borderRadius: UiConstants.radiusLg,
          border: Border.all(color: UiColors.border),
        ),
        padding: const EdgeInsets.all(UiConstants.space2),
        child: AspectRatio(
          aspectRatio: 1.0,
          child: Stack(
            children: [
              Align(
                alignment: Alignment.center,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Container(
                      width: 36,
                      height: 36,
                      decoration: BoxDecoration(
                        color: UiColors.primary.withValues(alpha: 0.08),
                        borderRadius: UiConstants.radiusLg,
                      ),
                      alignment: Alignment.center,
                      child: Icon(icon, color: UiColors.primary, size: 20),
                    ),
                    const SizedBox(height: UiConstants.space1),
                    Padding(
                      padding: const EdgeInsets.symmetric(
                        horizontal: UiConstants.space1,
                      ),
                      child: Text(
                        label,
                        textAlign: TextAlign.center,
                        maxLines: 2,
                        overflow: TextOverflow.ellipsis,
                        style: UiTypography.footnote1m.textSecondary,
                      ),
                    ),
                  ],
                ),
              ),
              if (completed != null)
                Positioned(
                  top: UiConstants.space2,
                  right: UiConstants.space2,
                  child: Container(
                    width: 16,
                    height: 16,
                    decoration: BoxDecoration(
                      shape: BoxShape.circle,
                      color: completed!
                          ? UiColors.primary
                          : UiColors.primary.withValues(alpha: 0.1),
                    ),
                    alignment: Alignment.center,
                    child: completed!
                        ? const Icon(
                            UiIcons.check,
                            size: 10,
                            color: UiColors.primaryForeground,
                          )
                        : Text(
                            "!",
                            style: UiTypography.footnote2b.primary,
                          ),
                  ),
                ),
            ],
          ),
        ),
      ),
    );
  }
}
