import React from 'react';
import {
    Card,
    CardHeader,
    CardBody,
    CardFooter,
    Typography,
    Avatar,
    Tooltip,
  } from "@material-tailwind/react";
  import ProductDetails from "../../../Pages/ProductDetails/ProductDetails";
  export function PublicAppCard({app , setMode}) {

    // These are blocks not apps, meaning only thr owner can manipulate them

    const handleAppClickDetails = (e, app, type) => {
      console.log("We want to view an app's details:", app);
      setMode(<ProductDetails setMode={setMode} data={app} type={type} entityType={"Product"} />);
    };
    

    const handleMyBlockClickDetails = (e , block) => {
      e.preventDefault();
      console.log("We want to view an apps details \n here is what our onClick is giving us : \n " , block)
      setMode(()=>{<ProductDetails data={app} type={"Block"} />});
    };
  
    const handleMyBlockClickRunner = (e , block) => {
      e.preventDefault();
      console.log("We want to view an apps details \n here is what our onClick is giving us : \n " , block)
      // setMode(<AIView model={model} />);
    };




    console.log("Public app details " , app)

    return (
      <Card onClick={(e) => { handleAppClickDetails(e, app, "LeumasApp") }} className={` cursor-pointer max-w-[24rem] overflow-hidden flex flex-col justify-between border-2 ${app?.public ? "border-green-400" : "border-blue-400"}`}>
        <CardHeader
          floated={false}
          shadow={false}
          color="transparent"
          className="m-0 rounded-none"
        >
          <img
          className="w-full h-full"
            src={app?.coverPhoto ? app?.coverPhoto : "https://via.placeholder.com/150"}
            alt="ui/ux review check"
          />
        </CardHeader>
        <CardBody>
          <Typography variant="h4" color="blue-gray">
            {app?.name || app?.title}
          </Typography>
          <Typography variant="lead" color="gray" className="mt-3 font-normal">
            {app?.description ? app?.description : "No Info Available"}
          </Typography>
        </CardBody>
        <CardFooter className="flex items-center justify-between">
          <div className="flex items-center -space-x-3">
            <Tooltip content={app?.owner?.frontend_username}>
              <Avatar
                size="sm"
                variant="circular"
                alt={app?.owner?.frontend_username}
                src={app?.owner?.profilePicture}
                className=" shadow-xl hover:z-10"
              />
            </Tooltip>

          </div>
          <div className="flex flex-col items-end justify-end">
            <Typography className="font-normal">$ {app.price} / {app?.priceFrequency}</Typography>
            <Typography className="font-xs">{app?.public ? "Public" : "Private" }</Typography>
          </div>
          
        </CardFooter>
      </Card>
    );
  }