"use client";

import Link from "next/link";
import { ArrowLeft, Construction, Workflow } from "lucide-react";
import { usePreferences } from "@/components/providers/app-providers";

type NavigationKey = keyof ReturnType<typeof usePreferences>["dictionary"]["dashboard"]["navigation"];

export function PlaceholderModule({ moduleKey, detail }: { moduleKey: NavigationKey; detail?: string }) {
  const { dictionary: t } = usePreferences();
  return (
    <section className="placeholder-module">
      <span className="placeholder-icon"><Construction size={31} /></span>
      <p className="eyebrow">{t.dashboard.placeholder.eyebrow}</p>
      <h1>{detail || t.dashboard.navigation[moduleKey]}</h1>
      <h2>{t.dashboard.placeholder.title}</h2>
      <p>{t.dashboard.placeholder.description}</p>
      <div className="placeholder-line"><Workflow size={17} /><span /></div>
      <Link className="secondary-button" href="/">{t.dashboard.placeholder.back}<ArrowLeft size={17} /></Link>
    </section>
  );
}