import styled from "styled-components";
import { List, Box, Typography, Grid } from "@mui/material";
import ThumbUpIcon from "@mui/icons-material/ThumbUp";
import ThumbDownIcon from "@mui/icons-material/ThumbDown";
import selectedTheme from "../../../themes";

export const ReviewsBox = styled(Box)`
    width: 100%;
    height: calc(100% - 90px);
    max-height: 100vh;
    @media (max-width: 1200px) {
      padding: 0;
    }
    @media (max-width: 600px) {
      position: relative;
      top: -45px;
      overflow: hidden;
      height: 350px;
      max-height: 350px;
      padding: 0;
    }
`;
export const ReviewsHeader = styled(Grid)`
  @media (max-width: 800px) {
    display: none;
  }
`

export const ReviewsTitle = styled(Typography)`
  font-family: "Open Sans";
  font-size: 16px;
  @media (max-width: 800px) {
    display: none;
  }
`

export const ReviewList = styled(List)`
    background: white;
    padding: 2rem;
    border-radius: 4px 0 0 4px;
    height: 100%;
    width: 100%;
    border: 1px solid ${selectedTheme.borderNormal};

    /* overflow-y: auto; */
    &::-webkit-scrollbar {
      width: 5px;
    }
    &::-webkit-scrollbar-track {
      background: #ddd;
    }
    &::-webkit-scrollbar-thumb {
      background: #777;
    }
    scrollbar-width: thin;
    scrollbar-color: #ddd;
`;

export const ThumbUp = styled(ThumbUpIcon)`
  position: relative;
  left: -8px;
`
export const ThumbDown = styled(ThumbDownIcon)`
  position: relative;
  left: -8px;
`
export const NoReviewsContainer = styled(Box)`
`
export const NoReviewsText = styled(Typography)`
  color: ${selectedTheme.primaryPurple};
  font-size: 24px;
  font-family: "Open Sans";
  text-align: center;
  font-weight: 700;
  width: 100%;
  
`
export const NoReviewsAltText = styled(Typography)`
  font-size: 12px;
  color: ${selectedTheme.primaryDarkText};
  font-family: "Open Sans";
  text-align: center;
  width: 100%;
  margin-bottom: 36px;
`
export const ProfileImage = styled.img`
  width: 54px;
  height: 54px;
  border-radius: 100%;
`
export const ProfileImageContainer = styled(Box)`
  width: 54px;
  height: 54px;
  border-radius: 100%;
  margin-right: 14px;
`
export const ReviewQuote = styled(Grid)`
  position: relative;
  left: 8px;
`
export const ThumbBox = styled(Grid)`
  max-width: 20px;
`
export const ReviewQuoteBox = styled(Grid)`
`
export const ReviewQuoteText = styled(Typography)`
  font-family: "Open Sans";
  font-size: 12px;
  color: ${selectedTheme.primaryDarkText};
`
export const ReviewDetails = styled(Grid)`
`
export const ReviewDetailsText = styled(Typography)`
  font-family: "Open Sans";
  font-size: 12px;
  color: ${selectedTheme.primaryDarkText};
  font-style: italic;
  letter-spacing: 0.02em;
`
export const ReviewDetailsValue = styled(Typography)`
  color: ${selectedTheme.primaryPurple};
  font-style: normal;
  font-weight: 600;
`
export const ProfileName = styled(Typography)`
  font-weight: 600;
  font-size: 16px;
  font-family: "Open Sans";
`
export const ReviewContainer = styled(Box)`
`