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

/// The sign-out button widget.
///
/// Uses design system tokens for all colors, typography, spacing, and icons.
class LogoutButton extends StatelessWidget {
  final VoidCallback onTap;

  const LogoutButton({super.key, required this.onTap});

  @override
  Widget build(BuildContext context) {
    final i18n = t.staff.profile.header;
    
    return Container(
      width: double.infinity,
      decoration: BoxDecoration(
        color: UiColors.bgPopup,
        borderRadius: BorderRadius.circular(UiConstants.radiusBase),
        border: Border.all(color: UiColors.border),
      ),
      child: Material(
        color: const Color(0x00000000),
        child: InkWell(
          onTap: onTap,
          borderRadius: BorderRadius.circular(UiConstants.radiusBase),
          child: Padding(
            padding: EdgeInsets.symmetric(vertical: UiConstants.space4),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                const Icon(LucideIcons.logOut, color: UiColors.destructive, size: 20),
                SizedBox(width: UiConstants.space2),
                Text(
                  i18n.sign_out,
                  style: UiTypography.body1m.copyWith(
                    color: UiColors.destructive,
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}
