"use client"

import * as React from "react"
import { cn } from "../../lib/utils"

export interface ListPageSplitDetailsPlaceholderProps {
  title?: string
  description?: React.ReactNode
  className?: string
}

/**
 * Empty right pane for split hubs — flat `bg-card` to match Miller / tree columns.
 */
export function ListPageSplitDetailsPlaceholder({
  title = "Nothing selected",
  description,
  className,
}: ListPageSplitDetailsPlaceholderProps) {
  return (
    <div
      className={cn(
        "flex h-full min-h-0 flex-col items-center justify-center bg-card px-6 py-10 text-center",
        className,
      )}
    >
      <div className="mb-4 flex size-14 items-center justify-center rounded-2xl border border-dashed border-border/70 bg-card">
        <i
          className="fa-light fa-sidebar text-[1.65rem] leading-none text-muted-foreground/70"
          aria-hidden="true"
        />
      </div>
      <p className="text-sm font-medium text-foreground">{title}</p>
      {description ? (
        <div className="mt-1.5 max-w-[16rem] text-xs leading-relaxed text-muted-foreground">{description}</div>
      ) : null}
    </div>
  )
}