"use client";

import Link from "next/link";
import { JM } from "@/components/project-creation/modal-theme";

export function MvpSetupStepPlaceholder({
  title,
  subtitle,
  body,
  primaryHref,
  primaryLabel,
  nextHref,
  nextLabel,
}: {
  title: string;
  subtitle: string;
  body: string;
  primaryHref: string;
  primaryLabel: string;
  nextHref: string;
  nextLabel: string;
}) {
  return (
    <div
      style={{
        flex: 1,
        overflow: "auto",
        padding: "28px 32px",
        fontFamily: JM.fontSans,
        background: "linear-gradient(180deg, #FAFAFA 0%, #F5F3FF 100%)",
      }}
    >
      <div style={{ maxWidth: 520 }}>
        <h1 style={{ fontSize: 22, fontWeight: 700, color: JM.ink, margin: "0 0 8px", fontFamily: JM.fontDisplay }}>
          {title}
        </h1>
        <p style={{ fontSize: 13.5, color: JM.muted, margin: "0 0 24px", lineHeight: 1.55 }}>{subtitle}</p>
        <p style={{ fontSize: 14, color: JM.ink, lineHeight: 1.65, margin: "0 0 28px" }}>{body}</p>
        <Link
          href={primaryHref}
          style={{
            display: "inline-block",
            padding: "12px 22px",
            borderRadius: 10,
            background: JM.primaryGradient,
            color: "#fff",
            fontSize: 14,
            fontWeight: 600,
            textDecoration: "none",
            boxShadow: JM.primaryShadow,
            marginRight: 12,
            marginBottom: 12,
          }}
        >
          {primaryLabel}
        </Link>
        <Link
          href={nextHref}
          style={{
            display: "inline-block",
            padding: "12px 18px",
            borderRadius: 10,
            border: `1px solid ${JM.border}`,
            color: JM.indigo,
            fontSize: 14,
            fontWeight: 600,
            textDecoration: "none",
            background: "#fff",
          }}
        >
          {nextLabel} →
        </Link>
      </div>
    </div>
  );
}