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

export function AdCard({ d, idx = 0 }: { d: Ad; idx?: number }) {
  const { go } = useGo();
  const { isFav, toggleFav } = useAuth();
  const fav = isFav('ad', d.id);
  const place = [d.area, d.city].filter(Boolean).join(', ');
  return (
    <div className="lcard" onClick={() => go('annonce', { id: d.id })}>
      <div className="lcard-media">
        <AdImage photos={d.photos} cat={d.cat} icon={d.icon} h={150} idx={idx} radius={18} />
        <div
          className={'lcard-fav ' + (fav ? 'on' : '')}
          onClick={(e) => { e.stopPropagation(); toggleFav('ad', d.id); }}
        >
          <Icon name="heart" size={16} fill={fav ? 'var(--red)' : 'none'} />
        </div>
        {d.cond && <div className="lcard-cat">{d.cond}</div>}
      </div>
      <div className="lcard-body">
        <div className="h4" style={{ fontSize: 16, lineHeight: 1.25, minHeight: 40 }}>{d.title}</div>
        <div className="row between" style={{ marginTop: 8 }}>
          <div className="h3" style={{ color: 'var(--red)', fontSize: 19 }}>
            {d.price} <span style={{ fontSize: 13, color: 'var(--muted)', fontWeight: 600 }}>DA{d.unit || ''}</span>
          </div>
          {d.nego && <span className="tiny" style={{ fontWeight: 600 }}>Négociable</span>}
        </div>
        <div className="lcard-meta" style={{ marginTop: 10 }}>
          <Icon name="pin" size={13} stroke={1.8} />
          <span>{place} · {d.when}</span>
        </div>
      </div>
    </div>
  );
}

export function CondChip({ c, small }: { c?: string; small?: boolean }) {
  if (!c) return null;
  const neuf = c === 'Neuf' || c === 'Comme neuf';
  return (
    <span
      className="chip chip-sm"
      style={{
        background: neuf ? 'var(--teal-tint)' : 'var(--bg2)',
        color: neuf ? 'var(--teal)' : 'var(--sub)',
        border: 'none',
        padding: small ? '4px 9px' : '5px 11px',
      }}
    >
      {c}
    </span>
  );
}