import React from 'react';
import styled from 'styled-components';

import { InlineSvg } from '@redocly/theme/markdoc/components/InlineSvg/InlineSvg';

export type CardIconProps = {
  variant?: string;
  src: string;
  rawContent?: string;
  position?: 'auto' | 'start' | 'center' | 'end';
};

export function CardIcon({ variant, src, rawContent, position }: CardIconProps) {
  return (
    <CardIconWrapper $variant={variant} $position={position}>
      {rawContent ? <CardSvg fileRawContent={rawContent} /> : <CardImg src={src} />}
    </CardIconWrapper>
  );
}

const CardImg = styled.img`
  width: var(--card-icon-width);
  height: var(--card-icon-height);
  display: inline-block;
  object-fit: cover;
`;

const CardSvg = styled(InlineSvg)`
  width: var(--card-icon-width);
  height: var(--card-icon-height);
  display: inline-block;

  svg {
    width: 100%;
    height: 100%;
    fill: var(--card-icon-color);
  }
`;

const CardIconWrapper = styled.div<{ $variant?: string; $position?: string }>`
  display: flex;
  align-self: ${({ $position }) => ($position ? $position : 'auto')};
  justify-content: center;
  min-width: var(--card-icon-width);
  min-height: var(--card-icon-height);
  flex-shrink: 0;

  padding: ${({ $variant }) => ($variant === 'ghost' ? '0' : `var(--card-icon-padding);`)};
  border-radius: var(--card-icon-border-radius);
  overflow: hidden;

  background-color: ${({ $variant }) =>
    $variant === 'ghost' ? 'transparent' : 'var(--card-icon-bg-color)'};
  border: ${({ $variant }) =>
    $variant === 'ghost' ? 'none' : `1px solid var(--card-icon-border-color)`};
`;