import 'package:flutter/material.dart';
import 'package:syncrow_web/core/extension/build_context_x.dart';

class StatefulTextField extends StatefulWidget {
  const StatefulTextField({
    super.key,
    required this.title,
    this.hintText = 'Please enter',
    required this.width,
    this.elevation = 0,
  });

  final String title;
  final String hintText;
  final double width;
  final double elevation;

  @override
  State<StatefulTextField> createState() => _StatefulTextFieldState();
}

class _StatefulTextFieldState extends State<StatefulTextField> {
  late TextEditingController _controller;

  @override
  void initState() {
    super.initState();
    _controller = TextEditingController();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return CustomTextField(
      title: widget.title,
      controller: _controller,
      hintText: widget.hintText,
      width: widget.width,
      elevation: widget.elevation,
    );
  }
}

class CustomTextField extends StatelessWidget {
  const CustomTextField({
    super.key,
    required this.title,
    required this.controller,
    this.hintText = 'Please enter',
    required this.width,
    this.elevation = 0,
  });

  final String title;
  final TextEditingController controller;
  final String hintText;
  final double width;
  final double elevation;

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
        Text(
          title,
          style: context.textTheme.bodyMedium!.copyWith(
            fontWeight: FontWeight.w600,
            color: const Color(0xff000000),
          ),
        ),
        const SizedBox(height: 8),
        Material(
          elevation: elevation,
          borderRadius: BorderRadius.circular(8),
          child: Container(
            width: width,
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(8),
            ),
            child: TextFormField(
              controller: controller,
              style: const TextStyle(color: Colors.black),
              decoration: InputDecoration(
                hintText: hintText,
                contentPadding:
                    const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
                border: InputBorder.none,
              ),
            ),
          ),
        ),
      ],
    );
  }
}