import { MapPin, Clock, Link as LinkIcon } from "lucide-react";
import type { StorySticker } from "@/lib/types";

function daysUntil(targetDate: string): number {
  const diff = new Date(targetDate).getTime() - Date.now();
  return Math.max(0, Math.ceil(diff / 86_400_000));
}

export function StickerContent({ sticker: s }: { sticker: StorySticker }) {
  switch (s.kind) {
    case "location":
      return (
        <span className="flex items-center gap-1.5 bg-white text-black text-sm font-semibold px-3 py-1.5 rounded-full shadow-lg">
          <MapPin size={13} className="text-red-500" /> {s.text}
        </span>
      );
    case "hashtag":
      return (
        <span className="text-white text-2xl font-extrabold drop-shadow-lg">#{s.text}</span>
      );
    case "countdown":
      return (
        <div className="flex flex-col items-center bg-white text-black rounded-2xl px-5 py-3 shadow-lg min-w-[140px]">
          <span className="text-xs font-semibold text-neutral-500 uppercase tracking-wide truncate max-w-[160px]">
            {s.text || "Countdown"}
          </span>
          <span className="text-3xl font-black tabular-nums">
            {s.targetDate ? daysUntil(s.targetDate) : 0}
          </span>
          <span className="text-[10px] font-semibold text-neutral-400 uppercase">days left</span>
        </div>
      );
    case "time":
      return (
        <span className="flex items-center gap-1.5 bg-white text-black text-sm font-semibold px-3 py-1.5 rounded-full shadow-lg">
          <Clock size={13} />{" "}
          {s.text ||
            new Date().toLocaleTimeString(undefined, { hour: "numeric", minute: "2-digit" })}
        </span>
      );
    case "mention":
      return (
        <span className="bg-black/50 text-white text-sm font-semibold px-3 py-1.5 rounded-full shadow-lg">
          @{s.text}
        </span>
      );
    case "link":
      return (
        <span className="flex items-center gap-1.5 bg-white text-black text-sm font-semibold px-3 py-1.5 rounded-full shadow-lg">
          <LinkIcon size={13} /> {(s.text || "").replace(/^https?:\/\//, "").slice(0, 30)}
        </span>
      );
    case "emoji":
    default:
      return <span className="text-4xl">{s.emoji}</span>;
  }
}