"use client";
import { useState, useEffect } from "react";
const STORAGE_KEY = "aw_compare_list";
const MAX_COMPARE = 3;
interface CompareItem {
id: number;
id_aw: string | null;
username: string | null;
}
function getCompareList(): CompareItem[] {
if (typeof window === "undefined") return [];
try {
const data = localStorage.getItem(STORAGE_KEY);
return data ? JSON.parse(data) : [];
} catch {
return [];
}
}
function saveCompareList(list: CompareItem[]) {
try {
localStorage.setItem(STORAGE_KEY, JSON.stringify(list));
} catch {}
// Dispatch a custom event so the floating bar updates
window.dispatchEvent(new Event("compare-updated"));
}
export function CompareAddButton({ escort }: { escort: CompareItem }) {
const [inList, setInList] = useState(false);
useEffect(() => {
const check = () => {
const list = getCompareList();
setInList(list.some((e) => e.id === escort.id));
};
check();
window.addEventListener("compare-updated", check);
return () => window.removeEventListener("compare-updated", check);
}, [escort.id]);
function toggle(e: React.MouseEvent) {
e.preventDefault();
e.stopPropagation();
const list = getCompareList();
if (inList) {
saveCompareList(list.filter((e) => e.id !== escort.id));
} else {
if (list.length >= MAX_COMPARE) return; // max reached
saveCompareList([...list, { id: escort.id, id_aw: escort.id_aw, username: escort.username }]);
}
}
return (
);
}
export function CompareFloatingBar() {
const [list, setList] = useState([]);
useEffect(() => {
const update = () => setList(getCompareList());
update();
window.addEventListener("compare-updated", update);
window.addEventListener("storage", update);
return () => {
window.removeEventListener("compare-updated", update);
window.removeEventListener("storage", update);
};
}, []);
function remove(id: number) {
const newList = list.filter((e) => e.id !== id);
saveCompareList(newList);
}
function clearAll() {
saveCompareList([]);
}
if (list.length === 0) return null;
return (
);
}