import React from "react";
import StatisticsCard from "../../Components/Ui/StaticsCard/StaticCard";
import { FaFirstOrder, FaProductHunt, FaUser } from "react-icons/fa";
import { useTranslation } from "react-i18next";
import {  Col, Row } from "reactstrap";
import Chart from "./Chart";
import { useGetHome } from "../../api/home";
import { Spin } from "antd";

export default function HomePage() {
  const { t } = useTranslation();
  
  const {data,isLoading} = useGetHome()
  

  const cardsData = [
    {
      icon: <FaUser className="warning" size={20} />,
      count: data?.userCount, // Example count
      pathWhenClick: '/users',
      titleKey: "userCount",
      contentKey: "user_in_your_Application"
    },
    {
      icon: <FaProductHunt className="warning" size={20} />,
      count: data?.productCount, // Example count
      pathWhenClick: "/products",
      titleKey: "productCount",
      contentKey: "Product_Count_in_your_Application"
    },
    {
      icon: <FaFirstOrder className="warning" size={20} />,
      count: data?.orderCount, // Example count
      pathWhenClick: "/order",
      titleKey: "orderCount",
      contentKey: "order_count_in_your_Application"
    }
  ];

  if(isLoading){
    return <Spin/>
  }
  return (
    <>
      <Row xs={1} sm={1} md={1} lg={3} xl={3}>
        {cardsData.map((card, index) => (
          <Col key={index} style={{ padding: "0.5rem" }}>
            <div style={{ cursor: "pointer" }}>
              <StatisticsCard
                pathWhenClick={card.pathWhenClick}
                icon={card.icon}
                count={`${card.count ?? ""}`}
                CardContent={t(`You_have`) + "  " + ((card.count) ?? "") + "  " + t(card.contentKey)}
                CardTitle={t(card.titleKey)}
              />
            </div>
          </Col>
        ))}
      </Row>
       
      <Row xs={1} sm={1} md={1} lg={2} xl={2} style={{ margin: "30px 0 " }}>
        <Chart dataMonth={data?.getMonthlyData}/>
      </Row>
    </>
  );
}