"use client";

import { AlertCircle, CheckCircle2, MapPin } from "lucide-react";
import { useLocation } from "@/context/LocationContext";

export default function LocationStatus() {
  const { status, error, coords, shortLabel, address } = useLocation();

  if (status === "idle") return null;

  if (status === "error" && error) {
    return (
      <div className="mt-3 flex items-start gap-2 rounded-xl border border-red-500/20 bg-red-500/8 px-4 py-3 text-sm text-red-300">
        <AlertCircle className="mt-0.5 h-4 w-4 shrink-0" />
        <span>{error}</span>
      </div>
    );
  }

  if (status === "success" && coords) {
    return (
      <div className="mt-3 flex flex-wrap items-center gap-x-4 gap-y-2 rounded-xl border border-emerald-500/20 bg-emerald-500/8 px-4 py-3 text-sm">
        <div className="flex items-center gap-2 text-emerald-300">
          <CheckCircle2 className="h-4 w-4 shrink-0" />
          <span className="font-medium">Konumunuz alındı</span>
        </div>
        {shortLabel && (
          <div className="flex items-center gap-1.5 text-slate-300">
            <MapPin className="h-3.5 w-3.5 text-emerald-400" />
            <span>{shortLabel}</span>
          </div>
        )}
        <span className="text-xs text-slate-500">
          {coords.lat.toFixed(5)}, {coords.lng.toFixed(5)}
          {coords.accuracy ? ` · ±${Math.round(coords.accuracy)}m` : ""}
        </span>
        {address?.displayName && (
          <span className="w-full truncate text-xs text-slate-500">
            {address.displayName}
          </span>
        )}
      </div>
    );
  }

  return null;
}