import * as React from "react";
// import { Component } from "react";
import {withTranslation,WithTranslation} from 'react-i18next'
import {
  Header,
  Footer,
  SideMenu,
  Carouseee,
  ProductCollection,
  Bussiness,
} from "../../components";
import styles from "./home.module.css";
import { productList1, productList2, productList3 } from "./mockups";
import sideImage1 from "../../assets/images/sider_2019_02-04-2.png";
import sideImage2 from "../../assets/images/sider_2019_02-04.png";
import sideImage3 from "../../assets/images/sider_2019_12-09.png";
import { Row, Col, Typography } from "antd";

export class HomePageComponent extends React.Component<WithTranslation> {
  // constructor(props: HomePageProps) {
  //     super(props);
  //     this.state = { :  };
  // }
  render() {
    const {t} = this.props
    return (
      <>
        <Header />
        {/* 页面内容 */}
        <div className={styles["page-content"]}>
          <Row style={{ marginTop: 20 }}>
            <Col span={6}>
              <div>
                <SideMenu />
              </div>
            </Col>
            <Col span={18}>
              <div>
                <Carouseee />
              </div>
            </Col>
          </Row>

          <ProductCollection
            title={
              <Typography.Title level={3} type="warning">
                {t("home_page.hot_recommended")}
              </Typography.Title>
            }
            sideImage={sideImage1}
            products={productList1}
          />
          <ProductCollection
            title={
              <Typography.Title level={3} type="danger">
              {t("home_page.new_arrival")}
              </Typography.Title>
            }
            sideImage={sideImage2}
            products={productList2}
          />
          <ProductCollection
            title={
              <Typography.Title level={3} type="success">
                  {t("home_page.hot_recommended")}
              </Typography.Title>
            }
            sideImage={sideImage3}
            products={productList3}
          />
          <Bussiness />
        </div>

        <Footer />
      </>
    );
  }
}


export const HomePage =withTranslation()(HomePageComponent)