import { onHover } from '@preply/ds-web-core';
import styled from 'styled-components';

interface Props {
    isSelected?: boolean;
    isDeprecated?: boolean;
}

export const Li = styled.li`
    display: flex;
    text-decoration: none;
`;

export const IconCard = styled.button.withConfig({
    shouldForwardProp: (prop: string) =>
        prop !== 'isDeprecated' && prop !== 'isDeprecated' && prop !== 'isSelected',
})<Props>`
    all: unset;
    display: flex;
    border-radius: 4px;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    padding: 16px;
    overflow: hidden;
    flex: 1;
    p {
        overflow: hidden;
        text-overflow: ellipsis;
        ${({ isDeprecated }) => {
            if (isDeprecated) {
                return `color: #966208`; // color.text.warning
            }
            return '';
        }}
    }
    ${onHover(`
        background-color: #fafafa;
    `)}
    &:focus {
        border: 1px solid #ccc;
    }
    ${({ isSelected }) => {
        if (isSelected) {
            return `background-color: #fafafa;
                border: 1px solid #ccc;`;
        }
        return '';
    }}
`;