import React from 'react';
import { Link } from 'react-router-dom';
import { Item } from '../types';

interface ItemCardProps {
  item: Item;
  variant?: 'compact' | 'standard';
}

const ItemCard: React.FC<ItemCardProps> = ({ 
  item, 
  variant = 'standard' 
}) => {
  const isCompact = variant === 'compact';
  
  const getPriceDisplay = () => {
    if (item.pricePerDay !== undefined) {
      return Number(item.pricePerDay) === 0 
        ? "Free to Borrow" 
        : `$${Math.floor(Number(item.pricePerDay))}/Day`;
    } else if (item.pricePerHour !== undefined) {
      return Number(item.pricePerHour) === 0 
        ? "Free to Borrow" 
        : `$${Math.floor(Number(item.pricePerHour))}/Hour`;
    }
    return null;
  };

  const getLocationDisplay = () => {
    return item.city && item.state 
      ? `${item.city}, ${item.state}` 
      : item.location;
  };

  return (
    <Link to={`/items/${item.id}`} className="text-decoration-none">
      <div className="card h-100" style={{ cursor: 'pointer' }}>
        {item.images && item.images[0] ? (
          <img
            src={item.images[0]}
            className="card-img-top"
            alt={item.name}
            style={{ 
              height: isCompact ? '150px' : '200px', 
              objectFit: 'cover' 
            }}
          />
        ) : (
          <div
            className="card-img-top bg-light d-flex align-items-center justify-content-center"
            style={{ height: isCompact ? '150px' : '200px' }}
          >
            <i className="bi bi-image text-muted" style={{ fontSize: '2rem' }}></i>
          </div>
        )}
        
        <div className={`card-body ${isCompact ? 'p-2' : ''}`}>
          {isCompact ? (
            <h6 className="card-title text-truncate mb-1 text-dark">{item.name}</h6>
          ) : (
            <h5 className="card-title text-dark">{item.name}</h5>
          )}

          <div className={isCompact ? "mb-1" : "mb-3"}>
            <div className="text-primary">
              <strong className={isCompact ? "small" : ""}>
                {getPriceDisplay()}
              </strong>
            </div>
          </div>

          <div className={`text-muted small ${isCompact ? 'mb-1' : 'mb-2'}`}>
            <i className="bi bi-geo-alt"></i> {getLocationDisplay()}
          </div>
        </div>
      </div>
    </Link>
  );
};

export default ItemCard;