NextEdu/src/shared/components/ui/empty-state.tsx

import * as React from "react"
import Link from "next/link"
import { cn } from "@/shared/lib/utils"
import { Button } from "@/shared/components/ui/button"
import type { ButtonProps } from "@/shared/components/ui/button"

interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {
  title: string
  description: string
  icon?: React.ElementType
  action?: {
    label: string
    onClick?: () => void
    href?: string
    /** 按钮样式，默认 "outline"（次级按钮）。首次引导场景可用 "default"（主按钮） */
    variant?: ButtonProps["variant"]
  }
}

export function EmptyState({
  icon: Icon,
  title,
  description,
  action,
  className,
  ...props
}: EmptyStateProps) {
  return (
    <div
      className={cn(
        "flex h-[450px] shrink-0 items-center justify-center rounded-md border border-dashed",
        className
      )}
      {...props}
    >
      <div className="mx-auto flex max-w-[420px] flex-col items-center justify-center text-center">
        {Icon && (
          <div className="flex h-20 w-20 items-center justify-center rounded-full bg-muted">
            <Icon className="h-10 w-10 text-muted-foreground" />
          </div>
        )}
        <h3 className="mt-4 text-lg font-semibold">{title}</h3>
        {description && (
          <p className="mb-4 mt-2 text-sm text-muted-foreground">
            {description}
          </p>
        )}
        {action && (
            action.href ? (
              <Button asChild variant={action.variant ?? "outline"}>
                <Link href={action.href}>{action.label}</Link>
              </Button>
            ) : (
              <Button onClick={action.onClick} variant={action.variant ?? "outline"}>
                {action.label}
              </Button>
            )
        )}
      </div>
    </div>
  )
}