import { Star, MapPin, Share, Heart } from "lucide-react";
import { Property } from "./types";

interface HeaderProps {
    property: Property;
}

export function Header({ property }: HeaderProps) {
    return (
        <div className="max-w-[95%] mx-auto pt-8 pb-6">
            <div className="flex flex-col gap-4">
                <h1 className="text-4xl font-medium uppercase tracking-tight">{property.title}</h1>
                <div className="flex flex-row items-center justify-between w-full">
                    <div className="flex items-center gap-4 text-sm md:text-base">
                        <span className="flex items-center gap-1 font-medium underline cursor-pointer hover:text-gray-600">
                            <Star className="w-4 h-4 fill-black" />
                            {property.rating} · {property.reviewCount} reviews
                        </span>
                        <span className="hidden md:inline text-gray-400">|</span>
                        <span className="flex items-center gap-1 font-medium underline cursor-pointer hover:text-gray-600">
                            <MapPin className="w-4 h-4" />
                            {property.location}
                        </span>
                    </div>
                    <div className="flex items-center gap-4">
                        <button className="flex items-center gap-2 px-4 py-2 text-sm font-medium border-2 border-transparent hover:bg-gray-100 transition-colors rounded-full md:rounded-none md:border-black md:hover:bg-[#E7FE78]">
                            <Share className="w-4 h-4" />
                            <span className="hidden md:inline">Share</span>
                        </button>
                        <button className="flex items-center gap-2 px-4 py-2 text-sm font-medium border-2 border-transparent hover:bg-gray-100 transition-colors rounded-full md:rounded-none md:border-black md:hover:bg-[#E7FE78]">
                            <Heart className="w-4 h-4" />
                            <span className="hidden md:inline">Save</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    );
}
