import React from "react";
import tw, {styled} from "twin.macro"
import "styled-components/macro"

export function Table(props) {
  return <div tw="block w-full overflow-x-auto text-secondary">
    <table tw="items-center w-full bg-transparent border-collapse ">
      {props.children}
    </table>
  </div>;
}


const TablePart = styled.td(tw`border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs p-4`)
export {TablePart}

const TableRow = styled.tr(tw`odd:bg-black/10 hover:bg-black/15`)
export {TableRow}

const TableHeader = styled.th(tw`px-6 py-3 align-middle text-xs uppercase  font-bold text-left text-secondary border-b-2 border-secondary`)
export {TableHeader}

const TableNote = styled.p(tw`text-xs font-normal italic normal-case`)
export {TableNote}

const TableSidePart = styled.td(tw`border-t-0 px-8 align-middle border-l-0 border-r-0 text-xs  p-4 pl-6 py-3 align-middle text-xs uppercase whitespace-nowrap font-bold text-left w-1/3 text-secondary border-r-2 border-secondary`)
export {TableSidePart}