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

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

export const ShoppingCard: React.FC<ICardProps> = ({
  title,
  description,
  imageUrl,
  category,
  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}>
      {imageUrl && (
        <CardThumbnail>
          <img src={getImageSrc()} alt={title} />
        </CardThumbnail>
      )}
      <CardContent>
        <CardTitle>{title}</CardTitle>
        <CardDescription>{description}</CardDescription>
        {category && <CardCategory>{category}</CardCategory>}
        {footer && <CardFooter>{footer}</CardFooter>}
      </CardContent>
    </CardContainer>
  );
};

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

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

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

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

const CardContent = styled.div`
  padding: 12px;
`;

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;
  margin-bottom: 8px;
  line-height: 1.4;
`;

const CardCategory = styled.span`
  font-size: 0.5rem;
  color: ${uiColors.yellow};
  font-family: 'Press Start 2P', cursive;
  background: rgba(255, 255, 255, 0.1);
  padding: 4px 8px;
  border-radius: 4px;
`;

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