import { PageHeader } from "./PageHeader";
import { Icon } from "./Icon";

type Props = {
  eyebrow: string;
  title: string;
  description: string;
  icon: string;
  features: string[];
  phase?: string;
};

/**
 * Übergangsansicht für Module, die in einer späteren Phase ausgebaut werden.
 * Hält Layout, Stil und Zugriffsschutz konsistent.
 */
export function ModulePlaceholder({
  eyebrow,
  title,
  description,
  icon,
  features,
  phase,
}: Props) {
  return (
    <div className="flex flex-col gap-5">
      <PageHeader eyebrow={eyebrow} title={title} description={description} />

      <div className="grid grid-cols-1 gap-5 lg:grid-cols-3">
        <div className="card lg:col-span-2" data-reveal>
          <div className="mb-4 flex items-center gap-3">
            <span className="brand-mark" style={{ width: 44, height: 44, padding: 11, color: "#0a0e22" }}>
              <Icon name={icon} size={22} />
            </span>
            <div>
              <h2>Geplanter Funktionsumfang</h2>
              {phase ? <span className="badge mt-1">{phase}</span> : null}
            </div>
          </div>
          <ul className="grid grid-cols-1 gap-2 sm:grid-cols-2">
            {features.map((f) => (
              <li
                key={f}
                className="flex items-center gap-2 rounded-2xl border px-3 py-2 text-sm"
                style={{ borderColor: "var(--line)", background: "rgba(13,19,42,.4)" }}
              >
                <span style={{ color: "var(--blue)" }}>
                  <Icon name="check" size={16} />
                </span>
                {f}
              </li>
            ))}
          </ul>
        </div>

        <div className="card flex flex-col gap-3" data-reveal data-reveal-delay={120}>
          <h2>Status</h2>
          <p className="text-muted text-sm">
            Dieses Modul ist im Aufbau. Die Grundstruktur, Datenmodelle und
            Zugriffsrechte stehen bereits — die Oberfläche folgt in der
            entsprechenden Projektphase.
          </p>
          <div
            className="rounded-2xl border px-4 py-3 text-sm"
            style={{ borderColor: "var(--line)", background: "rgba(13,19,42,.4)" }}
          >
            <div className="flex items-center gap-2 font-bold">
              <span
                className="inline-block h-2 w-2 rounded-full"
                style={{ background: "var(--cyan)", boxShadow: "0 0 10px 1px rgba(56,189,248,.7)" }}
              />
              In Vorbereitung
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}