import type { ButtonHTMLAttributes, ReactNode } from "react"

import { Button } from "../button/button.tsx"
import { Text } from "../text/text.tsx"

function LinkButtonStyle({ children, onClick }: { children: ReactNode } & ButtonHTMLAttributes<HTMLButtonElement>) {
  return <Button onClick={onClick}>{children}</Button>
}

const TableBlankSlate = ({ link, description }: { link?: ReactNode; description: ReactNode }) => {
  return (
    <div className="rounded-xl w-full py-40 flex flex-col gap-4 items-center justify-center bg-gradient-to-b from-secondary to-transparent px-4">
      <div className="max-w-2xl">
        <Text.H5 align="center" display="block" color="foregroundMuted">
          {description}
        </Text.H5>
      </div>
      {link}
    </div>
  )
}

TableBlankSlate.Button = LinkButtonStyle

export { TableBlankSlate }
