"use client";

export function TeacherEmptyState({ title, description }: { title: string; description?: string }) {
  return (
    <div className="rounded-2xl border border-dashed border-slate-200 bg-slate-50/80 p-10 text-center">
      <div
        className="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-2xl text-white"
        style={{ background: "var(--header-gradient)" }}
      >
        <svg viewBox="0 0 24 24" className="h-6 w-6" fill="currentColor" aria-hidden>
          <path d="M19 3H5c-1.1 0-2 .9-2 2v14l4-2 4 2 4-2 4 2V5c0-1.1-.9-2-2-2zm-2 12.05-2-.99-2 .99V5h4v10.05z" />
        </svg>
      </div>
      <div className="font-bold text-slate-800">{title}</div>
      {description ? <p className="mt-1 text-sm text-slate-500">{description}</p> : null}
    </div>
  );
}