import { Link } from '@inertiajs/react';
import HouseLayout from '../components/house/HouseLayout';
import InnerPageHero from '../components/house/InnerPageHero';
import MessageForm from '../components/house/MessageForm';
import { usePublicCopy } from '../components/house/publicCopy';

export default function FacilityDetails({ facility, others = [] }) {
    const copy = usePublicCopy();
    const name = facility?.name || 'Facility';
    const images = [facility?.image, ...(facility?.gallery || [])].filter(Boolean);
    const videos = facility?.videos || [];

    return (
        <HouseLayout title={name}>
            <InnerPageHero
                title={name}
                crumbs={[
                    { label: 'Home', href: '/' },
                    { label: 'Facilities', href: '/facilities' },
                    { label: name },
                ]}
                authorName={name}
                authorMeta={copy.location || 'Geita Bam Apartments'}
                authorImage={facility?.image}
            />

            <div className="apartment-details-left sp6">
                <div className="container">
                    <div className="row">
                        <div className="col-lg-7">
                            <div className="apartment-details-content">
                                <div className="img1">
                                    <img src={images[0] || '/img/all-images/apartment/apartment-img12.png'} alt={name} />
                                </div>
                                <div className="space32"></div>
                                <h3>About this facility</h3>
                                <div className="space16"></div>
                                <div dangerouslySetInnerHTML={{ __html: facility?.description || '<p>Details coming soon.</p>' }} />
                                {images.length > 1 && (
                                    <>
                                        <div className="space40"></div>
                                        <h3>Gallery</h3>
                                        <div className="space20"></div>
                                        <div className="row">
                                            {images.slice(1).map((image) => (
                                                <div className="col-lg-6 col-md-6" key={image}>
                                                    <div className="images-area">
                                                        <div className="img1">
                                                            <img src={image} alt="" />
                                                        </div>
                                                    </div>
                                                </div>
                                            ))}
                                        </div>
                                    </>
                                )}
                                {videos.length > 0 && (
                                    <>
                                        <div className="space40"></div>
                                        <h3>Video</h3>
                                        <div className="space20"></div>
                                        <div className="row">
                                            {videos.map((video) => (
                                                <div className="col-lg-6 col-md-6" key={video.url}>
                                                    <div className="images-area">
                                                        <div className="img2">
                                                            {video.type === 'link' ? (
                                                                <a href={video.url} className="popup-youtube"><i className="fa-solid fa-play"></i></a>
                                                            ) : (
                                                                <video src={video.url} controls />
                                                            )}
                                                        </div>
                                                    </div>
                                                </div>
                                            ))}
                                        </div>
                                    </>
                                )}
                            </div>
                        </div>
                        <div className="col-lg-5">
                            <div className="apartment-contactbox">
                                <MessageForm heading="Ask about this facility" buttonClass="header-btn4" />
                            </div>
                            {others.length > 0 && (
                                <>
                                    <div className="space40"></div>
                                    <div className="apartment-details-list">
                                        <h3>Other facilities</h3>
                                        <div className="space30"></div>
                                        {others.map((item) => (
                                            <div key={item.id}>
                                                <div className="row align-items-center">
                                                    <div className="col-lg-5 col-md-6">
                                                        <div className="img1">
                                                            <img src={item.image} alt="" />
                                                        </div>
                                                    </div>
                                                    <div className="col-lg-7 col-md-6">
                                                        <div className="content-area">
                                                            <Link href={`/facilities/${item.slug}`}>{item.name}</Link>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div className="space20"></div>
                                            </div>
                                        ))}
                                    </div>
                                </>
                            )}
                        </div>
                    </div>
                </div>
            </div>
        </HouseLayout>
    );
}