import React from 'react'

type Props = {
  title?: string
  description?: string
  compact?: boolean
}

const CardBoxComponentEmpty = ({
  title = 'Nothing to review yet',
  description = 'When records appear here, this view will turn into a live operating workspace.',
  compact = false,
}: Props) => {
  return (
    <div
      className={`flex items-center justify-center px-4 text-center ${compact ? 'py-10' : 'py-24'}`}
    >
      <div className="max-w-md">
        <div className="mx-auto inline-flex rounded-full border border-dashed border-gray-300 bg-gray-50 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.22em] text-gray-500 dark:border-dark-700 dark:bg-dark-800 dark:text-slate-400">
          Empty state
        </div>
        <p className="mt-4 text-base font-semibold text-gray-900 dark:text-white">{title}</p>
        <p className="mt-2 text-sm leading-6 text-gray-500 dark:text-slate-400">{description}</p>
      </div>
    </div>
  )
}

export default CardBoxComponentEmpty
