asd

// SpecificClinicPage.jsx

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 } from "react-icons/fa";
import doctorImg from "../Assets/doctor3.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 testServices = [
                    { id: 1, name: "Service 1", description: "Description for service 1" },
                    { id: 2, name: "Service 2", description: "Description for service 2" },
                    { id: 3, name: "Service 3", description: "Description for service 3" },
                ];

                // Тестовые данные для докторов в клинике
                const testDoctors = [
                    { id: 1, name: "Doctor 1", type: "Type 1" },
                    { id: 2, name: "Doctor 2", type: "Type 2" },
                    { id: 3, name: "Doctor 3", type: "Type 3" },
                ];

                setServices(testServices);
                setDoctors(testDoctors);
            } catch (error) {
                console.error("Error fetching clinic:", error);
            }
        };
        fetchClinic();
    }, []);

    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}>
                            <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={{ width: "100%", 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;
    }

    .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-button {
        background-color: #2A65FF;
        color: #fff;
        border: none;
        border-radius: 5px;
        padding: 10px 20px;
        font-size: 16px;
        cursor: pointer;
        transition: background-color 0.3s;
    }

    .service-button:hover {
        background-color: #0043b2;
    }
`;