import 'package:core_localization/core_localization.dart';
import 'package:design_system/design_system.dart';
import 'package:flutter/material.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: UiConstants.radiusLg,
        border: Border.all(color: UiColors.border),
      ),
      child: Material(
        color: UiColors.transparent,
        child: InkWell(
          onTap: onTap,
          borderRadius: UiConstants.radiusLg,
          child: Padding(
            padding: const EdgeInsets.symmetric(vertical: UiConstants.space4),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                const Icon(
                  UiIcons.logOut,
                  color: UiColors.destructive,
                  size: 20,
                ),
                const SizedBox(width: UiConstants.space2),
                Text(
                  i18n.sign_out,
                  style: UiTypography.body1m.textError,
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}
