import React from "react"
import cx from "classnames"

export function Table({ className, children }) {
  className = cx("border border-gray-300 rounded-lg overflow-x-auto", className)

  return (
    <div className={className}>
      <table className="w-full">{children}</table>
    </div>
  )
}

export function TableHeader({ className, children }) {
  className = cx(
    "bg-gray-50 uppercase text-xs text-gray-700 text-left",
    className
  )

  return (
    <thead className={className}>
      <tr className="">{children}</tr>
    </thead>
  )
}

export function TableBody({ className, children }) {
  className = cx("", className)

  return <tbody className={className}>{children}</tbody>
}

export function Column({ className, children }) {
  className = cx("py-3 px-4 leading-4 uppercase font-semibold", className)

  return <th className={className}>{children}</th>
}

export function Row({ className, children }) {
  className = cx("border-t border-gray-300", className)

  return <tr className={className}>{children}</tr>
}

export function Cell({ className, children, colSpan }) {
  className = cx("px-4 py-4 text-sm", className)

  return <td className={className} colSpan={colSpan}>{children}</td>
}
