import React from 'react';
import styled from 'styled-components';
import { uiColors } from '../../../constants/uiColors';
import { Ellipsis } from '../Ellipsis';

export interface ICardProps {
  title: string;
  description: string;
  imageUrl?: string | { src: string; default?: string };
  onClick?: () => void;
  footer?: React.ReactNode;
  className?: string;
}

export const ShoppingCardHorizontal: React.FC<ICardProps> = ({
  title,
  description,
  imageUrl,
  onClick,
  footer,
  className,
}) => {
  const getImageSrc = () => {
    if (!imageUrl) return '/placeholder-thumbnail.png';
    if (typeof imageUrl === 'string') return imageUrl;
    return imageUrl.default || imageUrl.src;
  };

  return (
    <CardContainer onClick={onClick} className={className}>
      <LeftSection>
        {imageUrl && (
          <CardThumbnail>
            <img src={getImageSrc()} alt={title} />
          </CardThumbnail>
        )}
      </LeftSection>
      <RightSection>
        <CardTitle>
          <Ellipsis maxLines={1} maxWidth="100%">
            {title}
          </Ellipsis>
        </CardTitle>
        <CardDescription>
          <Ellipsis maxLines={3} maxWidth="100%">
            {description}
          </Ellipsis>
        </CardDescription>
        {footer && (
          <CardFooter onClick={e => e.stopPropagation()}>{footer}</CardFooter>
        )}
      </RightSection>
    </CardContainer>
  );
};

const CardContainer = styled.div<{ onClick?: () => void }>`
  display: flex;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  border: 1px solid ${uiColors.darkGray};
  cursor: ${props => (props.onClick ? 'pointer' : 'default')};
  transition: transform 0.2s ease;

  &:hover {
    transform: ${props => (props.onClick ? 'translateY(-2px)' : 'none')};
  }

  max-width: 380px;
`;

const LeftSection = styled.div`
  width: 120px;
  flex-shrink: 0;
`;

const RightSection = styled.div`
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 12px;
  min-width: 0;
  max-width: 100%;
`;

const CardThumbnail = styled.div`
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  overflow: hidden;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
`;

const CardTitle = styled.h3`
  margin: 0;
  font-size: 0.6rem;
  color: ${uiColors.yellow};
  font-family: 'Press Start 2P', cursive;
  margin-bottom: 8px;
`;

const CardDescription = styled.p`
  margin: 0;
  font-size: 0.55rem;
  color: ${uiColors.lightGray};
  font-family: 'Press Start 2P', cursive;
  line-height: 1.4;
  margin-bottom: 8px;
`;

const CardFooter = styled.div`
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
`;
