import React, { useState, useMemo } from "react";
import { useRouter } from "next/router";
import { useQuery } from "@apollo/client";
import Head from "next/head";
import Header from "@/components/Header";
import Footer from "@/components/Footer";
import MobileMenuBottomSection from "@/components/MobileMenuBottomSection";
import { GET_LAXIMO_BRANDS } from "@/lib/graphql";
import { LaximoBrand } from "@/types/laximo";
import BrandWizardSearchSection from "@/components/BrandWizardSearchSection";
const InfoBrands = () => (
);
const BrandsPage = () => {
const router = useRouter();
const [selectedLetter, setSelectedLetter] = useState('');
const { data, loading, error } = useQuery<{ laximoBrands: LaximoBrand[] }>(GET_LAXIMO_BRANDS, { errorPolicy: 'all' });
const staticBrands = [
{ name: "Audi", code: "audi" },
{ name: "BMW", code: "bmw" },
{ name: "Cadillac", code: "cadillac" },
{ name: "Chevrolet", code: "chevrolet" },
{ name: "Citroen", code: "citroen" },
{ name: "Fiat", code: "fiat" },
{ name: "Mazda", code: "mazda" },
{ name: "Mercedes-Benz", code: "mercedes" },
{ name: "Nissan", code: "nissan" },
{ name: "Opel", code: "opel" },
{ name: "Peugeot", code: "peugeot" },
{ name: "Renault", code: "renault" },
{ name: "Toyota", code: "toyota" },
{ name: "Volkswagen", code: "volkswagen" },
{ name: "Volvo", code: "volvo" }
];
let brands = staticBrands;
if (data?.laximoBrands && data.laximoBrands.length > 0) {
brands = data.laximoBrands.map(brand => ({ name: brand.name, code: brand.code }));
} else if (error) {
console.warn('Laximo API недоступен, используются статические данные:', error.message);
}
const brandsByLetter = useMemo(() => {
const grouped: { [key: string]: typeof brands } = {};
brands.forEach(brand => {
const firstLetter = brand.name.charAt(0).toUpperCase();
if (!grouped[firstLetter]) grouped[firstLetter] = [];
grouped[firstLetter].push(brand);
});
Object.keys(grouped).forEach(letter => {
grouped[letter].sort((a, b) => a.name.localeCompare(b.name));
});
return grouped;
}, [brands]);
const letters = Object.keys(brandsByLetter).sort();
const handleBrandClick = (brand: { name: string; code?: string }) => {
if (brand.code) router.push(`/brands?selected=${brand.code}`);
};
const handleLetterClick = (letter: string) => {
setSelectedLetter(selectedLetter === letter ? '' : letter);
};
return (
<>
Все марки автомобилей - Protek
);
};
const BrandGrid = ({ brands, onBrandClick }: { brands: { name: string; code?: string }[]; onBrandClick: (brand: { name: string; code?: string }) => void }) => (
{brands.map((brand, idx) => (
))}
);
export default BrandsPage;