import styled from 'styled-components';
import { uiColors } from '../../constants/uiColors';

export const Table = styled.table`
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
`;

export const TableRow = styled.tr`
  &:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.05) !important;
  }
  &:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
  }
`;

export const TableHeader = styled.th`
  text-align: left;
  padding: 0.5rem;
  color: ${uiColors.yellow} !important;
  border-bottom: 1px solid ${uiColors.lightGray};
  text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
`;

export const TableCell = styled.td`
  padding: 0.5rem;
  color: ${uiColors.white};
  border-bottom: 1px solid ${uiColors.lightGray};
  text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
`;

export const ActionButtons = styled.div`
  display: flex;
  gap: 10px;
  align-items: center;
`;

interface IUserActionProps {
  color: string;
}

export const UserActionLink = styled.span<IUserActionProps>`
  color: ${({ color }) => color} !important;
  cursor: pointer;
  margin-right: 0.5rem;

  &:hover {
    text-decoration: underline;
  }
`;
