"use client";

import React, { useState } from "react";
import { Button, TextArea } from "antd-mobile";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
  faAngleLeft,
} from "@fortawesome/free-solid-svg-icons";
import { useRouter } from "next/navigation";
import UploadImgs from "@/components/UploadImgs";
export default function Feedback() {
  const [value, setValue] = useState();
  const [assets, setAssets] = useState([]);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const router = useRouter();
  return (
    <div>
      <div className="p-4 fixed top-0 z-10 w-full">
        <div className="w-9 h-9 flex items-center justify-center bg-[#FFFFFF1A] rounded-full absolute">
          <FontAwesomeIcon
            icon={faAngleLeft}
            size="xl"
            onClick={() => {
              router.back();
            }}
          />
        </div>
        <p className="text-base text-center leading-9">意见反馈</p>
      </div>
      {/* 内容 */}
      <div className="pt-16 p-4">
        <p className="text-base font-medium text-white">反馈描述</p>
        <TextArea
          placeholder="请填写详细描述，以便我们更好地为您解决问题"
          onChange={(value) => setValue(value)}
          value={value}
          className="h-32 bg-[#FFFFFF1A] text-white rounded-2xl mt-2 p-2"
          style={{ "--placeholder-color": "#FFFFFF80", "--font-size": "14px" }}
        />
        <p className="text-base font-medium text-white mt-4 mb-1">
          截图或录屏（最多9张）
        </p>
        <UploadImgs/>
        <div className="mt-16">
          <Button
            shape="rounded"
            size="middle"
            block
            // onClick={handleSubmit}
            style={{ "--background-color": "#FF669E", color: "#FFFFFF" }}
          >
            {/* {isSubmitting && <ActivityIndicator size="small" color="white" />} */}
            {isSubmitting ? "正在提交..." : "提交"}
          </Button>
        </div>
      </div>
    </div>
  );
}