import TanStackTable from "@/components/table/TanStackTable";
import { Box, Card, Typography } from "@mui/material";
import React from "react";
import CardHeader from "@mui/material/CardHeader";
import CardContent from "@mui/material/CardContent";
import TitleHeader from "@/components/titleHeader/titleHeader";
import homeServices from "@/services/api/productsApi";

const HomePage = async () => {
  const data = await homeServices.getProducts();
  return (
    <Box>
      <TitleHeader />
      <Card
        sx={{ boxShadow: "none", borderRadius: "12px", marginBlockStart: 2 }}
      >
        <CardHeader
          title="Products"
          fontWeight={"bold"}
          sx={{ borderBlockEnd: "1px solid var(--primary_light)" }}
        />
        <CardContent>
          <TanStackTable data={data} />
        </CardContent>
      </Card>
    </Box>
  );
};

export default HomePage;