import Image from "next/image";
import { Property } from "@/data/properties";

interface PropertyHeroProps {
    property: Property;
}

export default function PropertyHero({ property }: PropertyHeroProps) {
    return (
        <section className="relative h-[60vh] md:h-[70vh] w-full">
            <div className="absolute inset-0">
                <Image
                    src={property.image}
                    alt={property.title}
                    fill
                    className="object-cover"
                    priority
                />
                <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent" />
            </div>

            <div className="absolute bottom-0 left-0 right-0 p-6 md:p-12 max-w-7xl mx-auto">
                <div className="animate-slide-up">
                    <span className="inline-block px-3 py-1 mb-4 text-xs font-semibold tracking-wider text-white uppercase bg-primary rounded-full">
                        {property.status}
                    </span>
                    <h1 className="text-4xl md:text-6xl font-bold text-white mb-2">
                        {property.title}
                    </h1>
                    <p className="text-xl text-gray-200 mb-4 flex items-center gap-2">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-5 h-5">
                            <path strokeLinecap="round" strokeLinejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" />
                            <path strokeLinecap="round" strokeLinejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" />
                        </svg>
                        {property.location}
                    </p>
                    <p className="text-3xl font-semibold text-accent">
                        {property.price}
                    </p>
                </div>
            </div>
        </section>
    );
}
