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

import '../../../common/extension/extension.dart';
import '../../../common/theme/theme.dart';
import '../spaces/space.dart';

class PageTitle extends StatelessWidget {
  final String title;
  final String? subtitle;
  final bool isBack;
  final List<Widget>? actionWidget;
  final Widget? bottom;
  const PageTitle({
    super.key,
    required this.title,
    this.subtitle,
    this.isBack = true,
    this.actionWidget,
    this.bottom,
  });

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Container(
          height: context.deviceHeight * 0.123,
          padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 12.0),
          decoration: const BoxDecoration(
            color: AppColor.white,
            border: Border(
              bottom: BorderSide(color: AppColor.border, width: 1.0),
            ),
          ),
          child: Row(
            children: [
              if (isBack) ...[
                GestureDetector(
                  onTap: () => context.router.maybePop(),
                  child: const Icon(
                    Icons.arrow_back,
                    color: AppColor.primary,
                    size: 24,
                  ),
                ),
                const SpaceWidth(16),
              ],
              Expanded(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      title,
                      style: AppStyle.xxl.copyWith(fontWeight: FontWeight.w600),
                    ),
                    if (subtitle != null) ...[
                      const SizedBox(height: 4.0),
                      Text(
                        subtitle!,
                        style: AppStyle.md.copyWith(
                          color: AppColor.textSecondary,
                        ),
                      ),
                    ],
                  ],
                ),
              ),
              if (actionWidget != null) ...actionWidget!,
            ],
          ),
        ),
        bottom ?? const SizedBox.shrink(),
      ],
    );
  }
}
