import Image from "next/image";
import { Host } from "./types";

interface HostInfoProps {
    host: Host;
    guests: number;
    bedrooms: number;
    beds: number;
    bathrooms: number;
}

export function HostInfo({ host, guests, bedrooms, beds, bathrooms }: HostInfoProps) {
    return (
        <div className="flex items-center justify-between pb-8 border-b-2 border-gray-100">
            <div>
                <h2 className="text-2xl font-medium mb-1">Hosted by {host.name}</h2>
                <p className="text-gray-600">
                    {guests} guests · {bedrooms} bedrooms · {beds} beds · {bathrooms} baths
                </p>
            </div>
            <div className="relative w-14 h-14 md:w-16 md:h-16">
                <Image
                    src={host.image}
                    alt={host.name}
                    fill
                    className="rounded-full object-cover border-2 border-black"
                />
            </div>
        </div>
    );
}
