const MOCK_NEWS = [
  {
    date: "20.12.2025",
    title: "Наша работа клиники и новогодние праздники",
    href: "#",
  },
  {
    date: "11.08.2025",
    title: "СЕРВИС ОБНОВЛЕНИЕ: Обновление графика работы клиники",
    href: "#",
  },
  {
    date: "12.06.2025",
    title: "СЕРВИС ОБНОВЛЕНИЕ: Временное изменение работы клиники 22.06.25 г.",
    href: "#",
  },
  {
    date: "11.06.2025",
    title: "График работы клиники в ближайшие праздники",
    href: "#",
  },
];

export function NewsBlock() {
  return (
    <div
      className="rounded-xl p-8 space-y-6"
      style={{ background: "#f2fee6" }}
    >
      <h2 className="font-bold" style={{ color: "#000000", fontSize: 36, lineHeight: "38px" }}>
        Новости
      </h2>
      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
        {MOCK_NEWS.map((n) => (
          <div
            key={n.date}
            className="bb-news-card rounded-lg p-3 cursor-pointer"
            style={{
              border: "1px solid var(--bb-border)",
              transition: "background 0.15s, box-shadow 0.15s",
            }}
          >
            <p className="text-xs mb-2" style={{ color: "#6b7280" }}>
              {n.date}
            </p>
            <a
              href={n.href}
              className="text-sm font-medium leading-snug block"
              style={{ color: "#0089c3", textDecoration: "none" }}
            >
              {n.title}
            </a>
          </div>
        ))}
      </div>
      <div className="text-center">
        <button className="bb-btn bb-btn-md bb-btn-outline">
          Все новости
        </button>
      </div>
    </div>
  );
}