import 'package:drifter/theme/app_colors.dart';
import 'package:flutter/material.dart';

class UserInfo extends StatelessWidget {
  const UserInfo({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: [
          AvatarWidget(),
          SizedBox(
            height: 10,
          ),
          UserNameWidget(),
        ],
      ),
    );
  }
}

class AvatarWidget extends StatelessWidget {
  const AvatarWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
          border: Border.all(color: Colors.black),
          borderRadius: BorderRadius.all(Radius.circular(75))),
      width: 150,
      height: 150,
    );
  }
}

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

  @override
  State<UserNameWidget> createState() => _UserNameWidgetState();
}

class _UserNameWidgetState extends State<UserNameWidget> {
  late final TextEditingController messageController;
  late final FocusNode messageFocusNode;

  @override
  void initState() {
    messageController = TextEditingController();
    messageFocusNode = FocusNode();

    super.initState();
  }

  @override
  void dispose() {
    messageController.dispose();
    messageFocusNode.dispose();

    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(4.0),
      child: ClipRRect(
        borderRadius: const BorderRadius.all(
          Radius.circular(
            0.0,
          ),
        ),
        child: TextField(
          controller: messageController,
          focusNode: messageFocusNode,
          style: const TextStyle(
            fontSize: 14,
          ),
          decoration: InputDecoration(
            hintText: 'Username',
            hintStyle: const TextStyle(fontSize: 14),
            suffixIcon: IconButton(
              icon: const Icon(
                Icons.send,
                color: AppColors.mainDarkBlue,
                size: 30,
              ),
              onPressed: () {},
            ),
          ),
        ),
      ),
    );
  }
}