import MainLayout from "@/layout/main/mainLayout";
import { useState } from "react";
import { Divider, Space } from "antd-mobile";
import Translate from "./translate/index";
import { Electrocardiogram, Filter, GithubOne } from "@icon-park/react";
import { useNavigate } from "react-router-dom";
import "./index.less";

function Index() {
  const [visible, setVisible] = useState<boolean>(false);
  const navigate = useNavigate();

  const onLink = () => {
    navigate("/translate/mood");
  };
  return (
    <MainLayout>
      <div className="home">
        <div className="home-header">
          <h3>宠物翻译</h3>
          <Space style={{ fontSize: "20px", "--gap": "16px" }}>
            <Filter theme="outline" fill="#333" strokeWidth={3} strokeLinecap="butt" />
            <Divider direction="vertical" />
            <Electrocardiogram
              theme="outline"
              fill="#333"
              strokeWidth={3}
              strokeLinecap="butt"
              onClick={onLink}
            />
            <GithubOne theme="outline" fill="#333" strokeWidth={3} strokeLinecap="butt" />
          </Space>
        </div>
        <Translate searchVisible={visible} />
      </div>
    </MainLayout>
  );
}

export default Index;