import { Card, CardContent, Typography } from "@mui/material";
import Image from "next/image";
import React from "react";
import useCameraStore from "../hooks/useCameraStore";

const CardFotos = () => {
    const { imagePackage } = useCameraStore();
    return (
      <Card sx={{ maxWidth: 200 }}>
        <Image
          src={imagePackage ?? ''}
          alt="Captured"
          layout="fill"
          objectFit="cover"
          unoptimized
          className="p-2"
        />
        <CardContent>
          <Typography gutterBottom variant="h5" component="div">
            Lizard
          </Typography>
        </CardContent>
      </Card>
    );
}

export default CardFotos