asd2

import React, { useState, useEffect } from "react";
import axios from "axios";
import { useLocation } from "react-router-dom";
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import "bootstrap/dist/css/bootstrap.min.css";
import Header from "../Header.jsx";
import Footer from "../Footer.jsx";
import { FaMapMarkerAlt, FaStar, FaUserMd } from "react-icons/fa"; // Импортируем иконки
import doctorImg from "../Assets/dc1.png";

const SpecificClinicPage = () => {
    const location = useLocation();
    const [clinic, setClinic] = useState(null);
    const [doctors, setDoctors] = useState([]);
    const [services, setServices] = useState([]);

    useEffect(() => {
        const fetchClinic = async () => {
            try {
                const id = new URLSearchParams(location.search).get("id");
                if (!id) {
                    throw new Error("Clinic ID not provided");
                }
                const response = await axios.get(
                    `http://localhost:8000/clinic?id=${id}`
                );
                setClinic(response.data);

                const doctorsResponse = await axios.get(
                    `http://localhost:8000/get-clinic-doctors?id=${id}`
                );
                setDoctors(doctorsResponse.data);

                // Fetch services for the clinic
                const servicesResponse = await axios.get(
                    `http://localhost:8000/get-clinic-services?id=${id}`
                );
                setServices(servicesResponse.data);
            } catch (error) {
                console.error("Error fetching clinic:", error);
            }
        };
        fetchClinic();
    }, [location.search]);

    const sliderSettings = {
        dots: true,
        infinite: true,
        speed: 500,
        slidesToShow: 3,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: 3000,
        responsive: [
            {
                breakpoint: 1024,
                settings: {
                    slidesToShow: 2,
                    slidesToScroll: 1,
                    infinite: true,
                    dots: true
                }
            },
            {
                breakpoint: 600,
                settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1
                }
            }
        ]
    };

    return (
        <div style={{ display: "flex", flexDirection: "column", minHeight: "100vh" }}>
            <Header />
            <style>{styles}</style>
            <div
                style={{
                    display: "flex",
                    flexDirection: "column",
                    minHeight: "100vh",
                    backgroundImage: 'url("/clinic1.png")',
                    backgroundSize: "cover",
                    color: "white",
                }}
            >
                <div style={{ marginLeft: "300px", marginTop: "100px" }}>
                    <p
                        style={{
                            fontSize: "90px",
                            fontWeight: "600",
                            marginRight: "400px",
                        }}
                    >
                        {"clinic.clinic_name"}
                    </p>
                    <p style={{ fontSize: "29px", maxWidth: "900px", fontWeight: "400" }}>
                        {"clinic.description"}
                    </p>
                    <p style={{ fontSize: "34px", fontWeight: "600" }}>
                        <FaMapMarkerAlt /> <strong>Address:</strong> {"clinic.address"}
                    </p>
                </div>
            </div>

            {/* Карусель "Услуги клиники" */}
            <div style={{ textAlign: "center", marginTop: "60px", marginBottom: "40px" }}>
                <p style={{ color: "#00145B", fontSize: "60px" }}>Услуги клиники</p>
            </div>

            <div className="slider-container">
                <Slider {...sliderSettings}>
                    {services.map(service => (
                        <div className="slider-item" key={service.id}>
                            <div className="service-icons"> {/* Добавляем контейнер для иконок */}
                                <FaUserMd className="icon" /> {/* Иконка доктора */}
                            </div>
                            <h3>{service.name}</h3>
                            <p>{service.description}</p>
                            <button className="service-button">Записаться</button>
                        </div>
                    ))}
                </Slider>
            </div>

            {/* Карусель "Доктора в клинике" */}
            <div style={{ textAlign: "center", marginTop: "60px", marginBottom: "40px" }}>
                <p style={{ color: "#00145B", fontSize: "60px" }}>Доктора в клинике</p>
            </div>

            <div className="slider-container" style={{ marginBottom: "60px" }}>
                <Slider {...sliderSettings}>
                    {doctors.map(doctor => (
                        <div className="slider-item" key={doctor.id}>
                            <img
                                src={doctorImg}
                                alt={doctor.name}
                                style={{ marginLeft: "95px", width: "50%", height: "auto", maxHeight: "200px" }}
                            />
                            <h3>{doctor.name}</h3>
                            <p>{doctor.type}</p>
                        </div>
                    ))}
                </Slider>
            </div>

            <Footer />
        </div>
    );
};

export default SpecificClinicPage;

const styles = `
    .slider-container {
        width: 70%;
        margin: 0 auto;
    }

    .slider-item {
        text-align: center;
        padding: 20px;
        /* border: 1px solid #ddd; Убрали границу */
        border-radius: 5px;
        background-color: #fff;
        position: relative; /* Добавляем позиционирование */
        margin: 0 10px; /* Добавляем отступы для выравнивания расстояния */
        box-sizing: border-box; /* Убедимся, что padding и border не влияют на ширину */
    }

    .slider-item h3 {
        font-size: 24px;
        color: #00145B;
        margin-bottom: 10px;
    }

    .slider-item p {
        font-size: 16px;
        color: #555;
        margin-bottom: 20px;
    }

    .slider-item img {
        width: 100%;
        height: auto;
        max-height: 200px;
        border-radius: 5px;
        margin-bottom: 10px;
    }

    .service-icons {
        display: flex;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .service-icons .icon {
        font-size: 60px;
        color: #33437C;
        margin-left: 170px;
    }

    .service-button {
        background-color: #2A65FF;
        color: #fff;
        border: none;
        padding: 15px 90px;
        font-size: 24px;
        cursor: pointer;
        transition: background-color 0.3s;
        margin-top: 20px;
    }

    .service-button:hover {
        background-color: #0043b2;
    }
    /* Стили для точек пагинации */
    .slick-dots li button:before {
    margin-top: 10px;
    font-size: 16px;
    color: #2A65FF;
}

    .slick-dots li.slick-active button:before {
    color: #0043b2;
}
/* Обертка для слайдера */
    .slick-slider {
    margin: 0 auto;
    padding: 0 20px;
}
`