import styled from "styled-components";
import { colors } from "@crave/farmblocks-theme";
import Text from "@crave/farmblocks-text";

export const Table = styled.table.attrs(props => ({
  className: `${props.className || ""} ${
    props.$columnsTemplate ? "__asGrid" : ""
  }`,
}))`
  min-width: 100%;
  overflow-x: scroll;

  border: none;
  border-spacing: 0;

  @supports (display: contents) {
    &.__asGrid {
      display: grid;
      grid-template-columns: ${({ $columnsTemplate }) => $columnsTemplate};
    }
  }
`;

export const THead = styled.thead`
  .__asGrid & {
    display: contents;
  }
`;

export const TBody = styled.tbody`
  .__asGrid & {
    display: contents;
  }
`;

export const TR = styled.tr`
  .__asGrid & {
    display: contents;
  }
`;

export const TH = styled(Text).attrs({
  as: "th",
})`
  border: solid ${colors.GREY_08};
  border-width: 1px 0;
  padding: 8px 24px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  background-color: ${colors.SUGAR};

  white-space: nowrap;
`;

export const TD = styled(Text).attrs({
  as: "td",
})`
  border-bottom: 1px solid ${colors.GREY_08};
  padding: 16px 24px;
  font-size: 16px;
  line-height: 24px;
  color: ${colors.OYSTER};
`;
TD.defaultProps = {
  truncate: true,
};

export const TDBold = styled(TD)`
  font-weight: 700;
  color: ${colors.CARBON};
`;

@@ -48,16 +48,40 @@
 %7B colors
+, fontSizes, fontWeights
  %7D from 
@@ -817,31 +817,8 @@
 ext)
-.attrs(%7B%0A  as: %22th%22,%0A%7D)
 %60%0A  
@@ -900,64 +900,24 @@
 ;%0A  
-font-size: 16px;%0A  line-height: 24px;%0A  font-weight: 600
+line-height: 1.5
 ;%0A  
@@ -977,16 +977,117 @@
 wrap;%0A%60;
+%0ATH.defaultProps = %7B%0A  as: %22th%22,%0A  fontSize: fontSizes.MEDIUM,%0A  fontWeight: fontWeights.SEMIBOLD,%0A%7D;
 %0A%0Aexport
@@ -1121,24 +1121,44 @@
 trs(
-%7B%0A  as: %22td%22
+props =%3E (%7B%0A  type: props.color
 ,%0A%7D)
+)
 %60%0A  
@@ -1229,71 +1229,24 @@
 ;%0A  
-font-size: 16px;%0A  line-height: 24px;%0A  color: $%7Bcolors.OYSTER%7D
+line-height: 1.5
 ;%0A%60;
@@ -1266,16 +1266,28 @@
 ops = %7B%0A
+  as: %22td%22,%0A
   trunca
@@ -1296,16 +1296,70 @@
 : true,%0A
+  fontSize: fontSizes.MEDIUM,%0A  color: colors.OYSTER,%0A
 %7D;%0A%0Aexpo

use Text component's props to set color, size and weight