// @bun
// src/components/templates/recipes/RecipeDetail.tsx
import { BookOpen } from "lucide-react";
import { jsx, jsxs } from "react/jsx-runtime";
function RecipeDetail({ recipe }) {
  if (!recipe) {
    return /* @__PURE__ */ jsx("div", {
      className: "border-border flex flex-1 items-center justify-center rounded-2xl border border-dashed",
      children: /* @__PURE__ */ jsx("p", {
        className: "text-muted-foreground text-sm",
        children: "Select a recipe to view details."
      })
    });
  }
  return /* @__PURE__ */ jsxs("article", {
    className: "border-border bg-card space-y-4 rounded-2xl border p-6",
    children: [
      /* @__PURE__ */ jsxs("header", {
        className: "flex flex-wrap items-center gap-3",
        children: [
          /* @__PURE__ */ jsx(BookOpen, {
            className: "text-muted-foreground h-5 w-5"
          }),
          /* @__PURE__ */ jsxs("div", {
            children: [
              /* @__PURE__ */ jsx("h2", {
                className: "text-xl font-semibold",
                children: recipe.name
              }),
              /* @__PURE__ */ jsx("p", {
                className: "text-muted-foreground text-sm",
                children: recipe.description
              })
            ]
          })
        ]
      }),
      /* @__PURE__ */ jsxs("section", {
        children: [
          /* @__PURE__ */ jsx("h3", {
            className: "text-muted-foreground text-sm font-semibold tracking-wide uppercase",
            children: "Ingredients"
          }),
          /* @__PURE__ */ jsx("ul", {
            className: "text-foreground mt-2 list-disc space-y-1 pl-6 text-sm",
            children: recipe.ingredients.map((ingredient) => /* @__PURE__ */ jsxs("li", {
              children: [
                ingredient.name,
                " \u2013 ",
                ingredient.quantity
              ]
            }, ingredient.id))
          })
        ]
      }),
      /* @__PURE__ */ jsxs("section", {
        children: [
          /* @__PURE__ */ jsx("h3", {
            className: "text-muted-foreground text-sm font-semibold tracking-wide uppercase",
            children: "Instructions"
          }),
          /* @__PURE__ */ jsx("ol", {
            className: "text-foreground mt-2 list-decimal space-y-2 pl-6 text-sm",
            children: recipe.instructions.map((instruction) => /* @__PURE__ */ jsx("li", {
              children: instruction.content
            }, instruction.id))
          })
        ]
      })
    ]
  });
}
export {
  RecipeDetail
};
