import styled from 'styled-components';

import { ThemeObject } from '../Theme';

// const getColor = (theme: ThemeObject, color: keyof ThemeObject['pallet'], withOpacity = false, customColor?: string) => {
//   const isDarkTheme = theme.type === 'dark';
//   const hexOpacity = isDarkTheme ? '4D' : 16; // 4D - 30%, 16 - 10%;
//   const c = customColor ?? theme.pallet[color];
//   return `${c}${withOpacity ? hexOpacity : ''}`;
// };

// const getBoxShadow = (theme: ThemeObject, selected: boolean, hover = false) => {
//   if (!selected) return 'none';
//   return `0px 5px ${hover ? 45 : 25}px 0px ${theme.background.shadow}`;
// };

export const StyledTableHeaderComponent = styled.div.attrs((props: { $theme: ThemeObject }) => ({
  $theme: props.$theme,
}))`
  && {
    color: ${(props) => props.$theme.text.hint} !important;
    transition: all 0.25s;
  }
`;

export const StyledTableRow = styled.div.attrs((props: { $theme: ThemeObject; $bold?: boolean }) => ({
  $theme: props.$theme,
  $bold: props.$bold,
}))`
  && {
    color: ${(props) => (props.$bold ? props.$theme.text.main : undefined)} !important;
    transition: all 0.25s;
  }
`;

export const StyledTableDivider = styled.div.attrs((props: { $theme: ThemeObject }) => ({
  $theme: props.$theme,
}))`
  && {
    box-shadow: 0 1px 0 ${(props) => props.$theme.pallet.gray20};
    transition: all 0.25s;
  }
`;

export const StyledTableCell = styled.div.attrs((props: { $theme: ThemeObject }) => ({
  $theme: props.$theme,
}))`
  && {
    transition: all 0.25s;
    font-size: 14px;
    color: ${(props) => props.$theme.text.main};
    :first-child {
      font-weight: 600;
      font-size: 16px;
      color: ${(props) => props.$theme.text.secondary};
    }
    :last-child {
      font-weight: 700;
      color: ${(props) => props.$theme.text.main} !important;
    }
  }
`;
