"use client";

import { FC, } from "react";
import { Grid, Box } from "@mui/material";
import { useTranslate } from "react-polyglot";
import { PageHeader } from "@/app/_components/PageHeader";
import { VisualizationCard } from "@/app/_components/VisualizationCard";
import { useAppContext } from "@/app/_components/AppProvider";

type TrendsProps = {
  visualizations: any;
};

export const Trends: FC<TrendsProps> = ({ visualizations }) => {
  const t = useTranslate();
  const {
    colors: { cdrLinkOrange },
    typography: { h1, h4, p },
  } = useAppContext();

  return (
    <>
      <PageHeader backgroundColor={cdrLinkOrange}>
        <Grid
          container
          direction="row"
          spacing={2}
          justifyContent="space-between"
          alignItems="center"
        >
          {/*      <Grid item xs={3} sx={{ textAlign: "center" }}>
            <Image src={SearchCreateHeader} width={200} height={200} alt="" />
          </Grid> */}
          <Grid item container direction="column" xs={12}>
            <Grid item>
              <Box component="h1" sx={{ ...h1 }}>
                {t("trendsTitle")}
              </Box>
            </Grid>
            <Grid item>
              <Box component="h4" sx={{ ...h4, mt: 1, mb: 1 }}>
                {t("trendsSubtitle")}
              </Box>
            </Grid>
            <Grid>
              <Box component="p" sx={{ ...p }}>
                {t("trendsDescription")}
              </Box>
            </Grid>
          </Grid>
        </Grid>
      </PageHeader>
      <Grid
        container
        direction="row"
        wrap="wrap"
        spacing={3}
        justifyContent="space-between"
      >
        {visualizations.map((visualization: any, index: number) => (
          <VisualizationCard
            key={index}
            id={visualization.id}
            title={visualization.title}
            description={visualization.description}
            url={visualization.url}
          />
        ))}
      </Grid>
    </>
  );
};