type DashboardPageProps = {
  title: string;
  description?: string;
  eyebrow?: string;
};

export function DashboardPage({
  title,
  description = `Use this workspace to view and manage ${title.toLowerCase()}.`,
  eyebrow = "Workspace",
}: DashboardPageProps) {
  return (
    <div className="rounded-xl border border-slate-200 bg-white p-6 shadow-sm sm:p-8">
      <div className="flex size-12 items-center justify-center rounded-xl bg-violet-100 text-violet-600">
        <svg
          viewBox="0 0 24 24"
          className="size-6"
          fill="none"
          stroke="currentColor"
          strokeLinecap="round"
          strokeLinejoin="round"
          strokeWidth="1.8"
          aria-hidden="true"
        >
          <rect x="4" y="3" width="16" height="18" rx="4" />
          <path d="M8 8h8M8 12h8M8 16h5" />
        </svg>
      </div>
      <div className="mt-5 text-xs font-semibold uppercase tracking-widest text-violet-500">
        {eyebrow}
      </div>
      <div className="mt-2 text-2xl font-bold text-slate-900">{title}</div>
      <p className="mt-2 max-w-2xl text-sm leading-6 text-slate-500">{description}</p>

      <div className="mt-8 grid gap-4 md:grid-cols-3">
        {["Overview", "Recent activity", "Quick actions"].map((label) => (
          <div key={label} className="rounded-xl border border-slate-200 p-5">
            <div className="text-sm font-semibold text-slate-800">{label}</div>
            <p className="mt-2 text-xs leading-5 text-slate-400">
              {title} information and management tools will appear here.
            </p>
          </div>
        ))}
      </div>
    </div>
  );
}