"use client";

import { Header } from "@/components/nav/Header";
import { useRouter } from "next/navigation";

export function Placeholder({
  eyebrow,
  title,
  subtitle,
  body,
  icon,
}: {
  eyebrow: string;
  title: string;
  subtitle?: string;
  body: string;
  icon: React.ReactNode;
}) {
  const router = useRouter();
  return (
    <div className="flex min-w-0 flex-1 flex-col">
      <Header eyebrow={eyebrow} title={title} subtitle={subtitle} />
      <div className="flex min-h-0 flex-1 items-center justify-center overflow-y-auto p-6">
        <div className="card max-w-lg p-8 text-center">
          <div className="brand-mark mx-auto mb-4 grid h-14 w-14 place-items-center rounded-card text-black/80">
            {icon}
          </div>
          <h3 className="text-[18px] font-black">{title}</h3>
          <p className="mx-auto mt-2 max-w-sm text-[13.5px] text-muted">{body}</p>
          <div className="mt-5 flex justify-center gap-2">
            <button
              onClick={() => router.push("/c/c_general")}
              className="focus-ring rounded-control bg-accent px-4 py-2 text-[13px] font-semibold text-accent-fg"
            >
              Go to #general
            </button>
            <button
              onClick={() => router.push("/inbox")}
              className="focus-ring rounded-control border border-border px-4 py-2 text-[13px] font-semibold hover:bg-hover"
            >
              Open Inbox
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}