import { Link } from 'react-router-dom'
import { ChevronLeft } from 'lucide-react'
import type { Product } from '../lib/types'
import { formatProductPrice, productImageSrc } from '../lib/types'
import defaultPhoto from '../assets/images/DefaultPhoto.png'
import './ProductCard.css'

type ProductCardProps = {
  product: Product
}

export default function ProductCard({ product }: ProductCardProps) {
  const price = formatProductPrice(product)

  return (
    <Link to={`/products/${product.id}`} className="store-card">
      <div className="store-card__image">
        <img src={productImageSrc(product, defaultPhoto)} alt={product.nameFa} />
      </div>
      <div className="store-card__description">
        <div className="store-card__title">{product.nameFa}</div>
        <div className="store-card__subtitle">
          <span>{price.amount}</span>
          <span className="store-card__subtitle-detail"> تومان</span>
          <span className="store-card__subtitle-weight"> /{price.unitLabel}</span>
        </div>
        <div className="store-card__actions">
          <span className="store-card__arrow" aria-hidden="true">
            <ChevronLeft size={18} />
          </span>
        </div>
      </div>
    </Link>
  )
}
