import { Database, MapPin, Navigation, RefreshCw } from "lucide-react";
import type { Category } from "@/data/categories";
import { getCategoryStrategy } from "@/data/category-strategy";

interface OfficialDataBannerProps {
  category: Category;
}

export default function OfficialDataBanner({ category }: OfficialDataBannerProps) {
  const strategy = getCategoryStrategy(category.slug);
  const isHighGap = strategy.mapsGap === "high";

  if (!isHighGap && strategy.tier > 2) return null;

  return (
    <div
      className={`mb-6 overflow-hidden rounded-2xl border ${
        category.slug === "nobetci-eczane"
          ? "border-amber-500/25 bg-gradient-to-r from-amber-500/10 to-orange-500/5"
          : "border-emerald-500/20 bg-emerald-500/5"
      }`}
    >
      <div className="grid gap-4 p-5 sm:grid-cols-3 sm:p-6">
        <div className="flex gap-3 sm:col-span-3">
          <Database className="mt-0.5 h-5 w-5 shrink-0 text-emerald-400" />
          <div>
            <p className="text-sm font-semibold text-white">
              Google Maps&apos;te bulamadığınız bilgi — tek ekranda
            </p>
            <p className="mt-1 text-sm text-slate-400">{strategy.mapsLimitation}</p>
          </div>
        </div>

        <div className="flex items-start gap-2 text-xs text-slate-400">
          <RefreshCw className="mt-0.5 h-4 w-4 shrink-0 text-emerald-400" />
          <div>
            <span className="font-semibold text-slate-300">Veri kaynağı</span>
            <p className="mt-0.5">{strategy.dataSource}</p>
          </div>
        </div>

        <div className="flex items-start gap-2 text-xs text-slate-400">
          <MapPin className="mt-0.5 h-4 w-4 shrink-0 text-emerald-400" />
          <div>
            <span className="font-semibold text-slate-300">Konum sıralama</span>
            <p className="mt-0.5">En yakından uzağa mesafe + yürüme süresi</p>
          </div>
        </div>

        <div className="flex items-start gap-2 text-xs text-slate-400">
          <Navigation className="mt-0.5 h-4 w-4 shrink-0 text-emerald-400" />
          <div>
            <span className="font-semibold text-slate-300">Yol tarifi</span>
            <p className="mt-0.5">Doğruladıktan sonra Maps&apos;e tek tık</p>
          </div>
        </div>
      </div>

      {category.slug === "nobetci-eczane" && (
        <div className="border-t border-amber-500/15 bg-amber-500/5 px-5 py-2.5 text-center text-xs text-amber-200/90 sm:px-6">
          Nöbet listesi her gün 09:00&apos;da güncellenir · Acil tıbbi durumda 112
        </div>
      )}
    </div>
  );
}