import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:syncrow_web/utils/color_manager.dart';
import 'package:syncrow_web/utils/constants/assets.dart';

class CustomSearchBar extends StatelessWidget {
  final TextEditingController? controller;
  final String hintText;
  final Function(String)? onSearchChanged; // Callback for search input changes

  const CustomSearchBar({
    super.key,
    this.controller,
    this.hintText = 'Search',
    this.onSearchChanged,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        color: ColorsManager.whiteColors,
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.2),
            spreadRadius: 0,
            blurRadius: 8,
            offset: const Offset(0, 4),
          ),
        ],
      ),
      padding: const EdgeInsets.symmetric(horizontal: 16.0),
      child: Container(
        padding: const EdgeInsets.symmetric(vertical: 20.0),
        width: double.infinity,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(12),
        ),
        child: TextField(
          controller: controller,
          style: const TextStyle(
            color: Colors.black,
          ),
          onChanged: onSearchChanged, // Call the callback on text change
          decoration: InputDecoration(
            filled: true,
            fillColor: ColorsManager.textFieldGreyColor,
            hintText: hintText,
            hintStyle: TextStyle(
              color: Color(0xB2999999),
              fontSize: 12,
              fontFamily: 'Aftika',
              fontWeight: FontWeight.w400,
              height: 0,
              letterSpacing: -0.24,
            ),
            suffixIcon: Padding(
              padding: const EdgeInsets.only(right: 16),
              child: SvgPicture.asset(
                Assets.textFieldSearch,
                width: 24,
                height: 24,
              ),
            ),
            border: OutlineInputBorder(
              borderSide: BorderSide.none,
              borderRadius: BorderRadius.circular(12),
            ),
            contentPadding: const EdgeInsets.symmetric(
              vertical: 14,
              horizontal: 16,
            ),
          ),
        ),
      ),
    );
  }
}