// react
import React from "react";
// application
import AppImage from "~/components/shared/AppImage";
import AppLink from "~/components/shared/AppLink";
import { IBrand } from "~/interfaces/brand";

export type IBlockBrandsLayout = "columns-8-full" | "columns-7-sidebar";
interface Props {
    layout: IBlockBrandsLayout;
    brands: IBrand[];
}

function BlockBrands(props: Props) {
    const { layout, brands } = props;

    return (
        <div className={`block block-brands block-brands--layout--${layout}`}>
            <div className="container">
                <ul className="block-brands__list">
                    {brands.map((brand, brandIdx) => (
                        <React.Fragment key={brand.id ?? brandIdx}>
                            <li className="block-brands__item">
                                <AppLink
                                    href={`/models?brand_id=${brand.id}&name=${brand.name}`}
                                    className="block-brands__item-link"
                                >
                                    <div className="brand-image-container">
                                        <AppImage src={brand.imageUrl} />
                                    </div>
                                </AppLink>
                            </li>
                            {brandIdx < brands.length - 1 && (
                                <li className="block-brands__divider" role="presentation" />
                            )}
                        </React.Fragment>
                    ))}
                </ul>
            </div>

            <style jsx global>{`
                .block-brands__list {
                    border-bottom: none !important;
                }
                .block-brands__item-link {
                    display: flex !important;
                    flex-direction: column !important;
                    align-items: center !important;
                    justify-content: center !important;
                    background: #fff !important;
                    border: 1px solid #ebebeb !important;
                    border-radius: 10px !important;
                    padding: 15px !important;
                    height: 140px !important;
                    text-decoration: none !important;
                    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03) !important;
                    transition:
                        transform 0.4s ease,
                        border-color 0.2s ease !important;
                }
                .block-brands__item-link:hover {
                    border: 2px solid #342fd5 !important;
                    transform: scale(1.06) !important;
                    z-index: 5;
                    position: relative;
                }
                .block-brands__item-link img,
                .block-brands__item-link:hover img {
                    filter: none !important;
                    opacity: 1 !important;
                }
                .brand-image-container {
                    height: 90px !important;
                    width: 100% !important;
                    display: flex !important;
                    align-items: center !important;
                    justify-content: center !important;
                }
                .brand-image-container img {
                    max-height: 100% !important;
                    max-width: 95% !important;
                    object-fit: contain !important;
                }

                /* Más separación entre las cards */
                @media (min-width: 992px) {
                    .block-brands__list {
                        display: flex !important;
                        flex-wrap: wrap !important;
                        justify-content: center !important;
                        gap: 20px !important;
                        margin-top: 50px !important; /* baja las cards */
                    }
                    .block-brands__item {
                        width: calc((100% - 100px) / 6) !important;
                        max-width: none !important;
                    }
                    .block-brands__divider {
                        display: none !important;
                    }
                }
                @media (max-width: 991px) {
                    .block-brands__list {
                        display: flex !important;
                        flex-wrap: wrap !important;
                        justify-content: center !important;
                        gap: 14px !important;
                        margin-top: 35px !important; /* baja las cards en móvil */
                    }
                    .block-brands__item {
                        width: calc(50% - 7px) !important;
                        flex: 0 0 calc(50% - 7px) !important;
                        max-width: calc(50% - 7px) !important;
                        min-width: 0 !important;
                        box-sizing: border-box !important;
                        padding: 0 !important;
                        margin: 0 !important;
                    }
                    .block-brands__divider {
                        display: none !important;
                    }
                }
            `}</style>
        </div>
    );
}

export default React.memo(BlockBrands);