import React from 'react';
import { transport, partners, ads } from '../content';

function Box({ title, children }) {
  return (
    <section className="border border-rule bg-white/40 p-4">
      <h3 className="font-serif text-base font-bold mb-2 pb-2 border-b border-rule">
        {title}
      </h3>
      {children}
    </section>
  );
}

export default function Sidebar() {
  return (
    <aside className="space-y-6 text-sm">
      <Box title="Транспорт">
        <ul className="space-y-2">
          {transport.trains.map((t) => (
            <li key={t.url}>
              <a href={t.url} target="_blank" rel="noopener noreferrer">{t.label}</a>
            </li>
          ))}
          {transport.buses.map((b) => (
            <li key={b.url}>
              <a href={b.url} target="_blank" rel="noopener noreferrer">{b.label}</a>
            </li>
          ))}
        </ul>
      </Box>

      {partners.length > 0 && (
        <Box title="Наши партнёры">
          <ul className="space-y-2">
            {partners.map((p) => (
              <li key={p.name}>
                {p.url ? (
                  <a href={p.url} target="_blank" rel="noopener noreferrer">{p.name}</a>
                ) : (
                  <span>{p.name}</span>
                )}
                {p.note && <span className="text-muted"> — {p.note}</span>}
              </li>
            ))}
          </ul>
        </Box>
      )}

      {ads.length > 0 && (
        <Box title="Объявления">
          <ul className="space-y-2">
            {ads.map((a, i) => (
              <li key={i}>
                {a.url ? (
                  <a href={a.url} target="_blank" rel="noopener noreferrer">{a.text}</a>
                ) : (
                  <span>{a.text}</span>
                )}
              </li>
            ))}
          </ul>
        </Box>
      )}
    </aside>
  );
}