import { Box, Typography } from "@mui/material"
import styled from "styled-components"
import selectedTheme from "../../../themes"
import {ReactComponent as Category} from "../../../assets/images/svg/category.svg";
import { Icon } from "../../Icon/Icon";
import {ReactComponent as Swaps} from "../../../assets/images/svg/refresh.svg";

export const LittleOfferCardContainer = styled(Box)`
    background-color: ${selectedTheme.chatHeaderColor};
    border: 1px solid ${selectedTheme.borderNormal};
    border-radius: 2px;
    min-width: 211px;
    max-width: 300px;
    height: 90px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: row;
    position: relative;
`
export const OfferImage = styled.img`
    width: 54px;
    height: 54px;
    margin-top: 18px;
    margin-left: 18px;
    border-radius: 2px;
    overflow: hidden;
`
export const OfferDetails = styled(Box)`
    display: flex;
    flex-direction: column;
    margin-top: 25px;
    margin-left: 9px;
    flex-grow: 1;
`
export const OfferName = styled(Typography)`
    font-weight: 600;
    font-size: 16px;
    font-family: "Open Sans";
    color: ${selectedTheme.primaryPurple};
`
export const OfferCategory = styled(Typography)`
    font-family: "Open Sans";
    font-size: 12px;
    color: ${selectedTheme.primaryDarkText};
`
export const OfferCategoryIcon = styled(Category)`
    width: 12px;
    height: 12px;
    position: relative;
    top: 1.5px;
    right: 2px;
`
export const OfferSwapsIconContainer = styled(Icon)`
    width: 40px;
    height: 40px;
    background-color: ${selectedTheme.primaryPurple};
    border-radius: 100%;
    position: absolute;
    top: -19px;
    right: -19px;
    & span {
        width: 40px;
        height: 40px;
    }
`
export const OfferSwapsIcon = styled(Swaps)`
    width: 18px;
    height: 18px;
    position: relative;
    top: 10px;
`