import { Avatar, Button, Grid } from "@mui/material";
import React from "react";
import { useNavigate, useParams } from "react-router-dom";
import CompanyService from "../services/istar/CompanyService";

const StartPage = () => {
  // console.log(process.env?.NODE_ENV);
  const navigate = useNavigate();
  const params = useParams();
  const [company, setCompany] = React.useState({});
  const handleStart = () => {
    // console.log("COMPPPP: ", company);
    navigate(`/${params?.id}/detailscreen`, {
      state: {
        company: company,
      },
    });
  };

  React.useEffect(() => {
    CompanyService.getSingleRecord(params.id).then((res) => {
      console.log(res);
      setCompany(res);
    });
  }, []);

  return (
    <div>
      <Grid
        container
        direction="column"
        justifyContent="center"
        alignItems="center"
        spacing={1}
      >
        <Avatar
          src={company?.logo}
          alt={company?.name}
          style={{ marginTop: "2rem", width: 100, height: 100 }}
        />
        <h3>Welcome to {company?.name}</h3>
        <p>Easily check your hearing in just a few minutes!</p>
        <div
          style={{
            width: "20rem",
            height: "14rem",
          }}
        >
          <img
            src="https://istar-bucket.s3.ap-southeast-2.amazonaws.com/istar/2bff2c10-c714-11ed-a294-616cbf9fc9fbhomeImage.png"
            width="100%"
            height="100%"
          />
        </div>
        <Button
          style={{ marginTop: "5rem", padding: "1rem", width: "15rem" }}
          variant="contained"
          onClick={handleStart}
        >
          Start
        </Button>
      </Grid>
    </div>
  );
};

export default StartPage;
