import h from '../shared/h.js'

export function Table ({ children, ...props }) {
  return h('div', { ...props, className: 'overflow-x-auto' }, // Make it scrollable.
    h('table', {
      className: 'rounded-lg border-l border-t border-spacing-0 border-txa/20 border-separate w-full',
      _style: id => `
        ${id} tr { width: 100% }
        ${id} tr:hover { background-color: hsla(var(--color-txa), 0.05) }
        ${id} td, th {
          text-align: left;
          vertical-align: top;
          padding: calc(8px);
          border-right: 1px solid hsla(var(--color-txa), 0.2);
          border-bottom: 1px solid hsla(var(--color-txa), 0.2);
        }
        ${id} th > *, td > * {
          vertical-align: top;
        }
        ${id} th {
          font-weight: bold;
          background-color: hsla(var(--color-txa), 0.05);
        }
        ${id} tr:first-child > *:first-child { border-top-left-radius: 8px }
        ${id} tr:first-child > *:last-child { border-top-right-radius: 8px }
        ${id} tr:last-child > *:first-child { border-bottom-left-radius: 8px }
        ${id} tr:last-child > *:last-child { border-bottom-right-radius: 8px }
      `,
      children
    })
  )
}
