const { ListingCard, Tag, SectionHeading } = window.MartiniVastgoedDesignSystem_adb8d1;

function Listings({ listings, num = 1, total = 3 }) {
  const filters = ['Alle', 'Appartement', 'Studio', 'Huis', 'Kamer'];
  const [active, setActive] = React.useState('Alle');
  const shown = active === 'Alle' ? listings : listings.filter((l) => l.type === active);
  return (
    <section id="aanbod" style={{ background: 'var(--mv-bone)', padding: 'var(--section-y) var(--gutter)' }}>
      <div style={{ maxWidth: 'var(--maxw)', margin: '0 auto' }}>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 'var(--space-6)', alignItems: 'flex-end', justifyContent: 'space-between' }}>
          <SectionHeading num={num} total={total} label="Aanbod" title="Woningen te huur in Groningen." accent="green" />
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10 }}>
            {filters.map((f) => (
              <FilterChip key={f} active={active === f} onClick={() => setActive(f)}>{f}</FilterChip>
            ))}
          </div>
        </div>
        <div style={{ marginTop: 'var(--space-7)', display: 'grid', gridTemplateColumns: 'repeat(auto-fill,minmax(300px,1fr))', gap: 'var(--space-6)' }}>
          {shown.map((l) => (
            <ListingCard key={l.id} image={l.img} status={l.status} statusColor={l.statusColor} address={l.address} title={l.title} area={l.area} rooms={l.rooms} beds={l.beds} price={l.price} />
          ))}
        </div>
        {shown.length === 0 && <p style={{ marginTop: 'var(--space-6)', font: '500 var(--fs-body)/1.5 var(--font-body)', color: 'var(--mv-ink-70)' }}>Geen woningen in deze categorie. Probeer een ander filter.</p>}
      </div>
    </section>
  );
}

function FilterChip({ children, active, onClick }) {
  const [hover, setHover] = React.useState(false);
  return (
    <button onClick={onClick} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        minHeight: 44, padding: '9px 16px', border: '2px solid var(--mv-ink)', borderRadius: 0, cursor: 'pointer',
        font: '700 var(--fs-label)/1 var(--font-mono)', letterSpacing: 'var(--ls-label)', textTransform: 'uppercase',
        background: active ? 'var(--mv-ink)' : (hover ? 'var(--mv-bone-2)' : 'transparent'),
        color: active ? 'var(--mv-bone)' : 'var(--mv-ink)',
        boxShadow: active ? 'var(--shadow-xs)' : 'none',
        transition: 'background var(--dur-fast), color var(--dur-fast)',
      }}>{children}</button>
  );
}
Object.assign(window, { Listings });