'use client';
import { Icon } from '@/lib/icons';
import { AdImage } from './AdImage';
import { useGo } from '@/lib/router';
import { useAuth } from './AuthProvider';
import type { Listing } from '@/lib/data';

export function ListingCard({ d, idx = 0 }: { d: Listing; idx?: number }) {
  const { go } = useGo();
  const { isFav, toggleFav } = useAuth();
  const fav = isFav('biz', d.id);
  return (
    <div className="lcard" onClick={() => go('detail', { id: d.id })}>
      <div className="lcard-media">
        <AdImage biz photos={d.photos} cat={d.cat} h={150} idx={idx} radius={18} />
        <div className="lcard-cat">{d.catName}</div>
        <div
          className={'lcard-fav ' + (fav ? 'on' : '')}
          onClick={(e) => { e.stopPropagation(); toggleFav('biz', d.id); }}
        >
          <Icon name="heart" size={16} fill={fav ? 'var(--red)' : 'none'} />
        </div>
      </div>
      <div className="lcard-body">
        <div className="lcard-row">
          <div className="lcard-name">{d.name}</div>
          <div className="lcard-rate">
            <Icon name="star" size={15} fill="var(--gold)" style={{ color: 'var(--gold)' }} />
            {d.rating.toFixed(1)}
          </div>
        </div>
        <div className="lcard-meta">
          <Icon name="pin" size={14} stroke={1.8} />
          <span>{d.area}, {d.city} · {d.reviews} avis</span>
        </div>
        <div className="lcard-foot">
          <div className="lcard-price small">dès <b>{d.price} DA</b> {d.unit}</div>
          <div className={'status ' + (d.status === 'open' ? 'open' : 'soon')}>
            <span className="dot"></span>{d.status === 'open' ? 'Ouvert' : 'Sur RDV'}
          </div>
        </div>
      </div>
    </div>
  );
}