'use client'
import { ReactNode } from 'react'
interface TableHeadersProps { headers: string[]; children: ReactNode }
export function Table({ headers, children }: TableHeadersProps) {
  return (
    <div className="overflow-x-auto rounded-xl border border-slate-200 dark:border-slate-800">
      <table className="w-full text-sm">
        <thead className="bg-slate-50 dark:bg-slate-800">
          <tr>{headers.map((h) => (<th key={h} className="px-4 py-3 text-left font-medium text-slate-500 dark:text-slate-400">{h}</th>))}</tr>
        </thead>
        <tbody className="divide-y divide-slate-200 dark:divide-slate-700">{children}</tbody>
      </table>
    </div>
  )
}