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

/// A widget that displays the title and subtitle for the OTP Verification page.
class OtpVerificationHeader extends StatelessWidget {
  /// The phone number to which the code was sent.
  final String phoneNumber;

  /// Creates an [OtpVerificationHeader].
  const OtpVerificationHeader({super.key, required this.phoneNumber});

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Text(
          t.staff_authentication.phone_verification_page.enter_code_title,
          style: UiTypography.headline1m,
        ),
        const SizedBox(height: UiConstants.space2),
        Text.rich(
          TextSpan(
            text: t
                .staff_authentication
                .phone_verification_page
                .code_sent_message,
            style: UiTypography.body2r.textSecondary,
            children: <InlineSpan>[
              TextSpan(text: phoneNumber, style: UiTypography.body2b),
              TextSpan(
                text: t
                    .staff_authentication
                    .phone_verification_page
                    .code_sent_instruction,
              ),
            ],
          ),
        ),
      ],
    );
  }
}
