import PropTypes from "prop-types";
import { useMediaQuery } from "react-responsive";
import { Form, Input, Button, Card, Flex } from "antd";
import { FilePdfOutlined, CloudDownloadOutlined } from "@ant-design/icons";

const CVView = ({ setCurrentView }) => {
  const onFinish = (values) => {
    console.log("Form values:", values);
  };
  const isMobile = useMediaQuery({ maxWidth: 600 });

  return (
    <div className="tbview">
      <Card
        className={"tbcard"}
        title="CV"
        style={{
          width: isMobile ? "100%" : "70%",
          height: isMobile ? "100%" : "70%",
        }}
        actions={[
          <Button
            className={"tbbutton"}
            key="back"
            onClick={() => setCurrentView("index")}
            icon={
              <img
                src="https://cdn.tombutcher.work/icons/web/w-back.svg"
                alt="Back"
                style={{ height: "14px", marginBottom: "1px" }}
              />
            }
          >
            Back
          </Button>,
        ]}
      >
        <Flex style={{ margin: isMobile ? "0px 0px" : "0px 10%" }} vertical>
          <Flex
            gap="middle"
            style={{ borderBottom: "1px solid #ffffff", padding: "10px 0px" }}
          >
            <FilePdfOutlined style={{ fontSize: "64px" }} />
            <div style={{ width: "100%" }}>
              <h3 style={{ marginBottom: "0px" }}>Curriculum Vitae 2025</h3>
              <p style={{ marginBottom: "2px" }}>
                Enter your email address to download:
              </p>
              <Form
                layout="vertical"
                onFinish={onFinish}
                style={{ paddingBottom: "5px" }}
              >
                <Form.Item
                  name="email"
                  rules={[
                    { required: true, message: "Please enter your email" },
                  ]}
                  style={{ marginBottom: "0" }}
                >
                  <Flex gap="small">
                    <Input
                      type="email"
                      placeholder="example@example.com"
                      style={{ flex: 1 }}
                    />
                    <Button type="primary" htmlType="submit">
                      <CloudDownloadOutlined />
                    </Button>
                  </Flex>
                </Form.Item>
              </Form>
            </div>
          </Flex>
          <Flex gap="middle" style={{ padding: "10px 0px" }}>
            <FilePdfOutlined style={{ fontSize: "64px" }} />
            <div style={{ width: "100%" }}>
              <h3 style={{ marginBottom: "0px" }}>Curriculum Vitae 2024</h3>
              <p style={{ marginBottom: "2px" }}>
                Enter your email address to download:
              </p>
              <Form
                layout="vertical"
                onFinish={onFinish}
                style={{ paddingBottom: "5px" }}
              >
                <Form.Item
                  name="email"
                  rules={[
                    { required: true, message: "Please enter your email" },
                  ]}
                  style={{ marginBottom: "0" }}
                >
                  <Flex gap="small">
                    <Input
                      type="email"
                      placeholder="example@example.com"
                      style={{ flex: 1 }}
                    />
                    <Button type="primary" htmlType="submit">
                      <CloudDownloadOutlined />
                    </Button>
                  </Flex>
                </Form.Item>
              </Form>
            </div>
          </Flex>
        </Flex>
      </Card>
    </div>
  );
};

CVView.propTypes = {
  setCurrentView: PropTypes.func.isRequired,
};

export default CVView;