import { usePermissions } from '@/hooks/usePermissions'

interface Props {
  onUploadClick?: () => void
}

export function EmptyStateCard({ onUploadClick }: Props) {
  const { canCoverL1 } = usePermissions()

  return (
    <div className="rounded-lg border border-default bg-card p-6">
      <h2 className="font-heading text-xl font-bold text-heading mb-2">
        Your knowledge base is empty
      </h2>
      <p className="text-muted-foreground mb-4">
        L1 Workspace works best when your account has KB content or authored flows.
        Right now there's nothing to match against — calls will start as ad-hoc walks.
      </p>
      {canCoverL1 && onUploadClick ? (
        <button
          type="button"
          onClick={onUploadClick}
          className="rounded-md bg-accent text-white px-4 py-2 text-sm font-medium hover:bg-accent/90 transition-colors"
        >
          Upload KB content
        </button>
      ) : (
        <ul className="text-sm text-muted-foreground space-y-1 ml-4 list-disc">
          <li>Ask your admin to upload KB documents</li>
          <li>Or ask them to author a flow in the Flows library</li>
        </ul>
      )}
    </div>
  )
}