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

class UploadBox extends StatelessWidget {
  final Function() onSelect;
  final Function() onPhoto;

  const UploadBox({
    super.key,
    required this.onSelect,
    required this.onPhoto,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.only(top: 30),
      width: double.infinity,
      height: 350,
      decoration: BoxDecoration(
        color: Theme.of(context).cardColor,
        borderRadius: BorderRadius.circular(10),
        boxShadow: [
          BoxShadow(
            color: Color(0xffE9E9E9),
            spreadRadius: 2,
            blurRadius: 9,
            offset: Offset(1, 2), // changes position of shadow
          ),
        ],
      ),
      child: Stack(
        children: [
          Positioned(
            bottom: 0,
            left: 0,
            child: Image.asset(
              "assets/image/bg_hushi.png",
              width: 0.7.sw,
            ),
          ),
          Positioned(
            left: 0,
            top: 0,
            right: 0,
            child: Container(
              padding: EdgeInsets.all(15),
              child: Text(
                "Take a clear photo of the skin area you’d like to analyze.Our AI will provide instant health insights.",
                style: Theme.of(context).textTheme.labelSmall,
              ),
            ),
          ),
          SizedBox(
            width: double.infinity,
            child: Column(
              spacing: 20,
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(
                  "Analyze Your Skin",
                  style: Theme.of(context).textTheme.titleMedium,
                ),
                _btn(
                  colors: [Color(0xff107870), Color(0xff1EDECF)],
                  title: "Take photo",
                  onTap: (){
                    onPhoto();
                  },
                ),
                _btn(
                  colors: [Color(0xffFFFFFF), Color(0xffC6C6C6)],
                  title: "Upload Photo",
                  textColor: Color(0xff000000),
                  onTap: (){
                    onSelect();
                  },
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

Widget _btn({
  required List<Color> colors,
  Color textColor = Colors.white,
  required String title,
  required Function() onTap,
}) {
  return InkWell(
    onTap: onTap,
    child: Container(
      width: 120,
      height: 38,
      alignment: Alignment.center,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(10),
        gradient: LinearGradient(
          colors: colors,
        ),
      ),
      child: Text(
        title,
        style: TextStyle(
          fontSize: 14,
          color: textColor,
          fontWeight: FontWeight.w700,
        ),
      ),
    ),
  );
}