"use client"

import * as React from "react"

import { DATA_TABLE_GRID_INSET_CLASS } from "../../lib/table-edge-inset"
import { cn } from "../../lib/utils"
import { Button } from "../ui/button"

export interface TableViewMoreFooterProps {
  totalCount: number
  visibleCount: number
  onViewMore: () => void
  /** Defaults to "View more" */
  viewMoreLabel?: string
  /** When false, footer is full-bleed (parent owns horizontal padding). */
  edgeInset?: boolean
  className?: string
}

/** Footer chrome for embedded tables — expands inline or navigates via `onViewMore`. */
export function TableViewMoreFooter({
  totalCount,
  visibleCount,
  onViewMore,
  viewMoreLabel = "View more",
  edgeInset = true,
  className,
}: TableViewMoreFooterProps) {
  const hiddenCount = Math.max(0, totalCount - visibleCount)
  if (hiddenCount <= 0) return null

  return (
    <div
      className={cn(
        edgeInset && DATA_TABLE_GRID_INSET_CLASS,
        "flex items-center justify-center border-x border-t border-b border-border rounded-b-lg bg-background px-4 py-2",
        className,
      )}
    >
      <Button
        type="button"
        variant="ghost"
        size="sm"
        onClick={onViewMore}
      >
        {viewMoreLabel}
      </Button>
    </div>
  )
}