import styled from 'styled-components';
import { convertToTransientProps, getSpacing, getFontSize, getColorAlias } from '../../../../utils/index.js';

const ListItemPrefixWrapper = styled.div.withConfig({
    shouldForwardProp: convertToTransientProps(['type', 'variant']),
}) `
  display: flex;
  height: 100%;
  padding-inline: ${getSpacing('s02')};
  align-items: ${({ variant }) => variant === 'multi-line' ? 'flex-start' : 'center'};

  justify-content: center;

  div {
    margin: 0;
  }

  & > svg,
  & > div > svg {
    ${({ type }) => type === 'illustration' ? getFontSize('size24') : getFontSize('size14')};
  }

  img {
    object-fit: cover;
    height: ${getSpacing('s07')};
    width: ${getSpacing('s07')};
    border-radius: ${(props) => props.type === 'avatar'
    ? props.theme.radius.roundedE
    : props.theme.radius.roundedB};
  }
`;
const ImagePlaceholder = styled.div.withConfig({
    shouldForwardProp: convertToTransientProps(['type']),
}) `
  height: ${getSpacing('s07')};
  width: ${getSpacing('s07')};
  border-radius: ${(props) => props.type === 'avatar'
    ? props.theme.radius.roundedE
    : props.theme.radius.roundedB};
  background-color: ${getColorAlias('contentSubdued')};
`;

export { ImagePlaceholder, ListItemPrefixWrapper };
