import React from "react";
import { Box, Typography } from "@mui/material";

/**
 * Store pickup instructions when order status is ready_for_pickup.
 */
const ReadyForPickupNotice = ({ order, t }) => {
  return (
    <Box
      sx={{
        p: 1.5,
        borderRadius: 1,
        bgcolor: (theme) =>
          theme.palette.mode === "dark"
            ? "rgba(46, 125, 50, 0.18)"
            : "rgba(46, 125, 50, 0.08)",
        border: "1px solid",
        borderColor: "success.main",
      }}
    >
      <Typography variant="body2" sx={{ mb: 1, lineHeight: 1.5 }}>
        {t
          ? t("orders.readyForPickup.line1", { orderId: order.orderId })
          : `Deine Bestellung ${order.orderId} ist gepackt und wartet auf dich.`}
      </Typography>
      <Typography variant="body2" sx={{ mb: 1, lineHeight: 1.5 }}>
        {t
          ? t("orders.readyForPickup.line2")
          : "Du kannst sie ab sofort bei uns im Store abholen:"}
      </Typography>
      <Typography variant="body2" fontWeight="bold">
        {t ? t("orders.readyForPickup.storeName") : "Growheads"}
      </Typography>
      <Typography variant="body2">
        {t ? t("orders.readyForPickup.addressLine1") : "Trachenberger Straße 14"}
      </Typography>
      <Typography variant="body2">
        {t ? t("orders.readyForPickup.addressLine2") : "01129 Dresden"}
      </Typography>
    </Box>
  );
};

export default ReadyForPickupNotice;
