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

export type CardImageProps = {
  src: string;
  alt: string;
  position?: 'start' | 'end';
};

export function CardImage({ src, alt, position }: CardImageProps) {
  return <Image src={src} alt={alt} $position={position} />;
}

const Image = styled.img<{ $position?: string }>`
  width: 100%;
  aspect-ratio: var(--card-image-aspect-ratio);
  flex-shrink: 0;
  object-fit: cover;
  border-radius: var(--card-image-border-radius);

  order: ${({ $position }) => ($position === 'end' ? 1 : 0)};
`;