import { cn } from '@/lib/utils'
import type { CourseTheme } from '@/lib/theme'

export interface BlockRenderProps<T> {
  data: T
  theme: CourseTheme
  mode: 'edit' | 'view'
}

// Título opcional exibido acima de blocos compostos (cards, accordion, etc.)
export function SectionTitle({ title, center }: { title?: string; center?: boolean }) {
  if (!title?.trim()) return null
  return (
    <div className={cn('mb-6', center && 'text-center')}>
      <div className="mb-2.5 inline-block h-1.5 w-10 rounded-full bg-[var(--cp)]" aria-hidden />
      <h3
        className={cn(
          'text-xl font-bold tracking-tight text-slate-900 md:text-2xl',
          center && 'mx-auto'
        )}
      >
        {title}
      </h3>
    </div>
  )
}

// Aviso exibido quando uma lista de itens está vazia
export function EmptyHint({ label }: { label: string }) {
  return (
    <div className="flex items-center justify-center rounded-xl border border-dashed border-slate-300 bg-slate-50/60 px-6 py-10 text-sm text-slate-400">
      {label}
    </div>
  )
}

// Colunas do grid conforme a quantidade de itens
export function gridCols(count: number): string {
  if (count >= 4) return 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-4'
  if (count === 3) return 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3'
  if (count === 2) return 'grid-cols-1 sm:grid-cols-2'
  return 'grid-cols-1'
}

export function formatTime(seconds: number): string {
  if (!Number.isFinite(seconds) || seconds < 0) return '0:00'
  const m = Math.floor(seconds / 60)
  const s = Math.floor(seconds % 60)
  return `${m}:${s.toString().padStart(2, '0')}`
}