import React from "react";
import {
  Box,
  Typography,
  Card,
  CardContent,
  CardMedia,
  IconButton,
  Chip,
} from "@mui/material";
import AddIcon from "@mui/icons-material/Add";

const MealCard = ({ meal, onClick, onAdd }) => {
  const { name, price, unit, photo, image, description, additions } = meal;



  return (
    <Card
      onClick={onClick}
      sx={{
        width: { xs: "160px", md: "160px" },
        height: 250,
        borderRadius: "20px",
        p: "15px",
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "space-between",
        backgroundColor: "#FCFCFC",
        boxShadow: "none",
        border: "1px solid #f0f0f0",
        cursor: "pointer",
        transition: "transform 0.2s ease-in-out",
        "&:hover": { transform: "scale(1.02)" },
      }}
    >
      {/* صورة الوجبة */}
      <CardMedia
        component="img"
        image={photo || "/images/default-product.png"}
        alt={name}
        sx={{
          width: "120px",
          height: "120px",
          objectFit: "cover",
          borderRadius: "12px",
          // mb: 1,
          pointerEvents: "none",
        }}
      />

      {/* تفاصيل الوجبة */}
      <CardContent sx={{ p: 0, width: "100%", textAlign: "center" }}>
        <Typography variant="body1" fontWeight={600} fontSize={16} noWrap>
          {name}
        </Typography>

        {/* السعر */}
        <Typography
          variant="body2"
          fontWeight={600}
          sx={{ color: "#FF914D", fontSize: "15px", mt: 0.5 }}
        >
          ${price}{" "}
          <Typography
            component="span"
            variant="caption"
            color="text.secondary"
          >
            {unit || "/pcs"}
          </Typography>
        </Typography>

        {/* الوصف (أول عنصر فقط للتصغير) */}
        {description && description.length > 0 && (
          <Typography
            variant="caption"
            color="text.secondary"
            noWrap
            sx={{ display: "block", mt: 0.5 }}
          >
            {description[0]}
          </Typography>
        )}

        {/* الإضافات (أول 2 فقط) */}
        {/* {additions && additions.length > 0 && (
          <Box
            sx={{
              display: "flex",
              justifyContent: "center",
              flexWrap: "wrap",
              gap: 0.5,
              mt: 1,
            }}
          >
            {additions.slice(0, 2).map((add, i) => (
              <Chip
                key={i}
                label={add}
                size="small"
                sx={{
                  fontSize: "10px",
                  height: 18,
                  borderRadius: "8px",
                }}
              />
            ))}
          </Box>
        )} */}

        {/* زر الإضافة */}
        {/* <IconButton
          color="primary"
          size="small"
          onClick={(e) => {
            e.stopPropagation();
            if (onAdd) onAdd(meal);
          }}
          sx={{
            backgroundColor: "#FF8551",
            color: "#fff",
            mt: 1,
            width: 28,
            height: 28,
            "&:hover": { backgroundColor: "#ff7043" },
          }}
        >
          <AddIcon fontSize="small" />
        </IconButton> */}

      </CardContent>
    </Card>
  );
};

export default MealCard;