/* eslint-disable react/jsx-key */
/* eslint-disable react/prop-types */
/* eslint-disable no-unused-vars */
// eslint-disable-next-line no-unused-vars
import React from "react";
import { Box, Text } from "@chakra-ui/react";

// eslint-disable-next-line react/prop-types
const UseCase = ({ useCase, bannerImage, bannerHeading, bannerSubHeading }) => {
  return (
    <div>
      <Box
        height={"75vh"}
        width={"100%"}
        backgroundImage={`url(${bannerImage})`}
        backgroundRepeat={"no-repeat"}
        backgroundSize={"cover"}
        position="relative"
      >
        <Box
          position="absolute"
          top={0}
          left={0}
          width="100%"
          height="100%"
          backgroundColor="rgba(0, 0, 0, 0.8)"
          display={"flex"}
          justifyContent={"center"}
          alignItems={"center"}
          flexDirection={"column"}
        >
          <Box w={"50vw"}>
            <Text
              textAlign={"center"}
              className="rubix-text-heading-2 rubix-fw-700"
            >
              {bannerHeading}
            </Text>
            <Text
              textAlign={"center"}
              className="rubix-text-medium rubix-fw-500"
            >
              {bannerSubHeading}
            </Text>
          </Box>
        </Box>
      </Box>

      <Box
        p={5}
        pb={14}
        backgroundColor={"#000000"}
        display={"flex"}
        justifyContent={"center"}
        flexDirection={"column"}
        alignItems={"center"}
        gap={16}
        w={"100%"}
      >
        {useCase.map(
          ({ useCaseHeading, useCaseSubHeading, useCaseDetails }) => (
            <Box
              display={"flex"}
              justifyContent={"center"}
              flexDirection={"column"}
              alignItems={"start"}
              gap={7}
              pt={5}
              width={"85vw"}
            >
              {/* ========[ Head-Para ]====== */}
              <Box width={"65vw"}>
                <Text
                  style={{ marginBottom: 6 }}
                  className="rubix-fw-500"
                  fontSize="3xl"
                  textColor={"#ffffff"}
                >
                  {useCaseHeading}
                </Text>
                <Text textColor={"#ffffff"} fontSize="xl">
                  {useCaseSubHeading}
                </Text>
              </Box>

              {useCaseDetails.map(({ title, description }, index) => (
                <Box width={"75vw"}>
                  <Text
                    style={{ marginBottom: 6 }}
                    className="rubix-fw-500"
                    fontSize="2xl"
                    textColor={"#ffffff"}
                  >
                    {title}
                  </Text>
                  <Text textColor={"#ffffff"} fontSize="lg">
                    {description}
                  </Text>
                </Box>
              ))}
            </Box>
          )
        )}
      </Box>
    </div>
  );
};

export default UseCase;