import { FC } from "react";
import { Box, Typography } from "@mui/material";
import { DateDefinition, TimeDefinition } from "./helper";
import { CardAnswer } from "./cardAnswers/CardAnswer";
import { Result } from "@root/results/store";

interface AnswerListProps {
  isTablet: boolean;
  results: Result[] | [];
  setPrePaymentModalOpen: (value: boolean) => void;
}
export const AnswerList: FC<AnswerListProps> = ({
  isTablet,
  results,
  setPrePaymentModalOpen,
}) => {
  return (
    <>
      {!isTablet && (
        <Box
          sx={{
            display: "flex",
            width: "100%",
            alignItems: "center",
            mb: "15px",
          }}
        >
          <Typography sx={{ fontSize: "18px", color: "#9A9AAF", mr: "40px" }}>
            № заявки
          </Typography>
          <Typography sx={{ fontSize: "18px", color: "#9A9AAF" }}>
            Дата
          </Typography>
          <Typography sx={{ fontSize: "18px", color: "#9A9AAF", ml: "288px" }}>
            Контакты
          </Typography>
        </Box>
      )}

      <Box
        sx={{
          display: "flex",
          alignItems: "flex-start",
          flexDirection: isTablet ? "-moz-initial" : "column",
          flexWrap: isTablet ? "wrap" : "nowrap",
          gap: "20px",
        }}
      >
        {results &&
          results.map((result) => {
            const dayResult = DateDefinition(result.created_at);
            const timeResult = TimeDefinition(result.created_at);
            return (
              <CardAnswer
                key={result.id}
                name={result.content.name}
                email={result.content.email}
                phone={result.content.phone}
                address={result.content.address}
                isNew={result.new}
                idResult={result.id}
                dayResult={dayResult}
                timeResult={timeResult}
                openPrePaymentModal={() => setPrePaymentModalOpen(true)}
              />
            );
          })}
      </Box>
    </>
  );
};
