import 'package:derma_flutter/router/config/route_paths.dart';
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:provider/provider.dart';
import 'package:remixicon/remixicon.dart';

import '../../providers/app_store.dart';

class AppHeader extends StatefulWidget {
  const AppHeader({super.key});

  @override
  State<AppHeader> createState() => _AppHeaderState();
}

class _AppHeaderState extends State<AppHeader> {
  void _handLogout() {
    var appStore = context.read<AppStore>();
    appStore.logout();
    context.go(RoutePaths.login);
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Row(
            spacing: 10,
            children: [
              Image.asset(
                "assets/image/logo.png",
                width: 44,
              ),
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    "Demacare",
                    style: TextStyle(fontWeight: FontWeight.bold),
                  ),
                  Text(
                    "AI Skin Health Analysis",
                    style: Theme.of(context).textTheme.labelSmall,
                  ),
                ],
              ),
            ],
          ),
          Row(
            children: [
              PopupMenuButton(
                offset: const Offset(0, 50),
                color: Theme.of(context).cardColor,
                itemBuilder: (context) {
                  return [
                    PopupMenuItem(
                      onTap: _handLogout,
                      child: Text("Log out"),
                    ),
                  ];
                },
                child: Container(
                  width: 40,
                  height: 40,
                  decoration: BoxDecoration(
                    color: Theme.of(context).colorScheme.primary,
                    shape: BoxShape.circle,
                  ),
                  child: Icon(RemixIcons.user_3_line, color: Colors.white),
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}