marketing/src/components/Cart/ProductModal.tsx

import styled from 'styled-components';
import { formatCurrency } from '../../utils/formatCurrency';
import { getLargeProductImage } from '../../utils/product';
import type { Product } from '../../types/cart';
import {useEffect} from "react";

import {reachGoal} from "../../hooks/useYM";

interface ProductModalProps {
    product: Product | null;
    onClose: () => void;
    onReplace: (product: Product) => void;
    onDelete: (product: Product) => void;
}

export function ProductModal({
                                 product,
                                 onClose,
                                 onReplace,
                                 onDelete,
                             }: ProductModalProps) {
    useEffect(() => {
        if (product !== null) {
            reachGoal('ac_open_popup')
        }
    }, [product]);

    if (!product) return null;

    return (
        <Overlay onClick={onClose}>
            <Window onClick={event => event.stopPropagation()}>
                <CloseButton type="button" aria-label="Закрыть" onClick={onClose}>
                    &times;
                </CloseButton>

                <ImageWrap>
                    <img src={getLargeProductImage(product)} alt={product.name} />
                </ImageWrap>

                <Title>{product.name}</Title>

                <Details>
                    <span>{product.n}</span> · <span>{formatCurrency(product.total_price)}</span>
                </Details>

                <ActionButton type="button" onClick={() => onReplace(product)}>
                    Заменить
                </ActionButton>

                <AnotherButton
                    href="#"
                    onClick={event => {
                        event.preventDefault();
                        onDelete(product);
                    }}
                >
                    Удалить
                </AnotherButton>
            </Window>
        </Overlay>
    );
}

const Overlay = styled.div`
    height: 100svh;
    position: fixed;
    display: flex;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.4);
    justify-content: center;
    align-items: center;
    z-index: 1000;
`;

const Window = styled.div`
    background-color: #ffffff;
    border-radius: 12px;
    width: 100%;
    max-width: 340px;
    padding: 20px 24px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    position: relative;
    max-height: 90vh;
    overflow: auto;
`;

const CloseButton = styled.button`
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    color: #CEDFD0;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    padding: 5px;

    &:hover {
        color: #777;
    }
`;

const ImageWrap = styled.div`
    display: flex;
    justify-content: center;
    margin: 20px 0;

    img {
        width: 160px;
        height: auto;
        object-fit: contain;
    }
`;

const Title = styled.h2`
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    color: #222222;
    line-height: 1.4;
    margin: 0 0 10px;
`;

const Details = styled.p`
    font-size: 15px;
    text-align: center;
    color: #555555;
    margin: 0 0 24px;
`;

const ActionButton = styled.button`
    display: block;
    width: 100%;
    background-color: #5ba653;
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    padding: 14px 0;
    border: none;
    border-radius: 8px;
    cursor: pointer;

    &:hover {
        background-color: #4e9247;
    }
`;

const AnotherButton = styled.a`
    display: block;
    text-align: center;
    margin-top: 15px;
    color: #5ba653;
    font-size: 14px;
    text-decoration: none;
    font-weight: 500;

    &:hover {
        text-decoration: underline;
    }
`;