import { Link } from 'react-router-dom'
import { formatInt, hostnameOf, Store } from '../api'
import { IconMapPin } from './Icons'
import OriginBadge from './OriginBadge'
import StoreLogo from './StoreLogo'

export default function StoreCard({ store }: { store: Store }) {
  return (
    <Link to={`/boutiques/${encodeURIComponent(store.id)}`} className="card store-card">
      <div className="store-card-top">
        <StoreLogo
          storeId={store.id}
          name={store.name}
          logoUrl={store.logo_url}
          size="md"
        />
        <div className="store-card-heading">
          <h3 className="store-card-name">{store.name}</h3>
          <p className="store-card-domain">{hostnameOf(store.url)}</p>
        </div>
        <OriginBadge origin={store.origin_class} />
      </div>
      <p className="store-card-location">
        <IconMapPin size={14} />
        {[store.city, store.region].filter(Boolean).join(', ') || 'Québec'}
      </p>
      <div className="store-card-meta">
        {store.platform && (
          <span className="platform-badge">{store.platform}</span>
        )}
        <span className="store-card-count">
          {formatInt(store.product_count)} produit
          {store.product_count === 1 ? '' : 's'}
        </span>
      </div>
    </Link>
  )
}