import { useEffect, useState, useCallback } from "react"; import { useRouter } from "next/router"; import { toast } from "react-toastify"; import Particles from "react-particles"; import { loadSlim } from "tsparticles-slim"; import type { Engine } from "tsparticles-engine"; import { URL_API } from "~/constants"; interface IBranch { sucursalID: number; name: string; banner: string; url: string; region?: string; address?: string; email?: string; website?: string; phone?: string; phone2?: string; instagram?: string; latitude?: number; longitude?: number; } const mainRed = "#e31e24"; export default function BranchesPage() { const router = useRouter(); const [branches, setBranches] = useState([]); const [expandedBranches, setExpandedBranches] = useState>(new Set()); const [loading, setLoading] = useState(true); const particlesInit = useCallback(async (engine: Engine) => { await loadSlim(engine); }, []); const particlesConfig: any = { particles: { number: { value: 25, density: { enable: true, value_area: 800, }, }, color: { value: mainRed, }, shape: { type: "circle", }, opacity: { value: 0.6, random: true, anim: { enable: true, speed: 1, opacity_min: 0.1, sync: false, }, }, size: { value: 12, random: true, anim: { enable: true, speed: 2, size_min: 5, sync: false, }, }, line_linked: { enable: false, }, move: { enable: true, speed: 1.5, direction: "top", random: true, straight: false, out_mode: "out", bounce: false, attract: { enable: false, }, }, }, interactivity: { detect_on: "canvas", events: { onhover: { enable: false, }, onclick: { enable: false, }, resize: true, }, }, retina_detect: true, }; useEffect(() => { const fetchBranches = async () => { try { setLoading(true); const response = await fetch(`${URL_API}/sucursal`); const data = await response.json(); setBranches(data); } catch (error) { console.error("Error al obtener las sucursales:", error); toast.error("Error al obtener las sucursales"); } finally { setLoading(false); } }; fetchBranches(); }, []); const toggleBranch = (branchId: number) => { const newExpanded = new Set(expandedBranches); if (newExpanded.has(branchId)) { newExpanded.delete(branchId); } else { newExpanded.add(branchId); } setExpandedBranches(newExpanded); }; const handleViewOnMap = (branch: IBranch) => { if (branch.latitude && branch.longitude) { const mapUrl = `https://www.google.com/maps?q=${branch.latitude},${branch.longitude}`; window.open(mapUrl, "_blank"); } else { toast.info("Coordenadas no disponibles para esta sucursal"); } }; if (loading) { return (
Cargando...
); } return (
{/* Título con partículas */}

CONOCE TODAS NUESTRAS SUCURSALES

{/* ACORDEÓN POR SUCURSAL */}
{branches.map((branch) => { const isExpanded = expandedBranches.has(branch.sucursalID); return (
{isExpanded && (

{branch.name}

CARRETERA NACIONAL LA ENCRUCIJADA-SAN MATEO. EDIFICIO L TOCARS. PISO 1. LOCAL S/N., LA ENCRUCIJADA ARAGUA

Sitio web:{" "} https://ltocarsoficial.com/ ↗
Teléfono: (244) 419.89.91
Teléfono: (412) 043.07.11
)}
); })}
); }