import { jsxs as t, jsx as n } from "react/jsx-runtime";
import { Card as a, CardContent as o, Typography as r, Button as c } from "@mui/material";
import { styled as l } from "../Theme/index.js";
function f({ plan: e }) {
  return /* @__PURE__ */ t(s, { $shadow: !0, children: [
    /* @__PURE__ */ n("div", { className: "card-header", children: /* @__PURE__ */ n("div", { className: "title", children: e.name }) }),
    /* @__PURE__ */ t(o, { className: "card-content", children: [
      /* @__PURE__ */ t("div", { className: "plan-content", children: [
        /* @__PURE__ */ n("div", { className: "plan-pricing", children: /* @__PURE__ */ n(r, { component: "h2", variant: "h5", className: "price-number", children: e.price }) }),
        /* @__PURE__ */ n("div", { className: "plan-services", children: e.featureList.map((i) => /* @__PURE__ */ n(r, { component: "p", variant: "body1", align: "center", children: i }, i)) })
      ] }),
      /* @__PURE__ */ n("div", { className: "plan-actions", children: e.showButton && /* @__PURE__ */ n(c, { fullWidth: !0, variant: "outlined", color: "primary", component: "a", href: e.buttonLink, children: e.buttonText }) })
    ] })
  ] });
}
const s = l(a)`
  height: 500px;
  display: flex;
  flex-direction: column;
  @media (max-width: 320px) {
    margin-top: 20px;
  }

  && {
    ${(e) => e.$shadow ? "" : "box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.1)"}
  }

  .card-header {
    height: 80px;
    background-color: #f1fbfb;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    .title {
      font-size: 18px;
      font-weight: 600;
      text-align: center;
      color: #404040;
      margin: 0;
    }
  }

  .card-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    flex-grow: 1;
  }

  .plan-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;

    .plan-pricing {
      display: flex;
      justify-content: center;
      align-items: baseline;
      margin-bottom: 12px;
      color: #4e6af6;
      text-align: center;
    }

    .price-number {
      font-size: 30px;
      font-weight: 600;
      color: #4e6af6;
    }

    .plan-services strong {
      color: #4e6af6;
      font-weight: 500;
    }
  }

  .plan-actions {
    width: 100%;
  }
`;
export {
  f as default
};
