'use client';

import localFont from "next/font/local";
import Image from "next/image";
import { useState } from "react";

const figtree = localFont({
    src: [
        {
            path: '../../../public/Fonts/figtree/figtree.ttf',
        },
    ],
})

interface Property {
    id: number;
    image: string;
    city: string;
    price: number;
    title: string;
    rating: number;
}

const cities = ["Islamabad", "Karachi", "Lahore"];

// Sample property data - you'll replace these with actual hotel images
const propertiesByCity: Record<string, Property[]> = {
    "Islamabad": [
        {
            id: 1,
            image: "/hotel-banner.png",
            city: "ISLAMABAD, PAKISTAN",
            price: 12500,
            title: "Luxury hotel in Islamabad",
            rating: 4.9
        },
        {
            id: 2,
            image: "/hotel-banner.png",
            city: "ISLAMABAD, PAKISTAN",
            price: 15000,
            title: "Modern apartment near Faisal Masjid",
            rating: 4.8
        },
        {
            id: 3,
            image: "/hotel-banner.png",
            city: "ISLAMABAD, PAKISTAN",
            price: 18000,
            title: "Spacious villa with mountain view",
            rating: 4.9
        },
        {
            id: 4,
            image: "/hotel-banner.png",
            city: "ISLAMABAD, PAKISTAN",
            price: 11000,
            title: "Cozy studio in F-7 sector",
            rating: 4.7
        }
    ],
    "Karachi": [
        {
            id: 5,
            image: "/hotel-banner.png",
            city: "KARACHI, PAKISTAN",
            price: 10000,
            title: "Beachfront apartment in Clifton",
            rating: 4.8
        },
        {
            id: 6,
            image: "/hotel-banner.png",
            city: "KARACHI, PAKISTAN",
            price: 13500,
            title: "Luxury suite near Port Grand",
            rating: 4.9
        },
        {
            id: 7,
            image: "/hotel-banner.png",
            city: "KARACHI, PAKISTAN",
            price: 9500,
            title: "Modern flat in DHA",
            rating: 4.7
        },
        {
            id: 8,
            image: "/hotel-banner.png",
            city: "KARACHI, PAKISTAN",
            price: 14000,
            title: "Spacious penthouse with sea view",
            rating: 4.9
        }
    ],
    "Lahore": [
        {
            id: 9,
            image: "/hotel-banner.png",
            city: "LAHORE, PAKISTAN",
            price: 11500,
            title: "Heritage hotel near Badshahi Masjid",
            rating: 4.8
        },
        {
            id: 10,
            image: "/hotel-banner.png",
            city: "LAHORE, PAKISTAN",
            price: 13000,
            title: "Modern apartment in Gulberg",
            rating: 4.9
        },
        {
            id: 11,
            image: "/hotel-banner.png",
            city: "LAHORE, PAKISTAN",
            price: 16000,
            title: "Luxury villa in DHA",
            rating: 4.9
        },
        {
            id: 12,
            image: "/hotel-banner.png",
            city: "LAHORE, PAKISTAN",
            price: 10500,
            title: "Cozy stay near Minar-e-Pakistan",
            rating: 4.7
        }
    ]
};

function BrowseByCity() {
    const [selectedCity, setSelectedCity] = useState("Islamabad");

    return (
        <div className="w-full py-16 px-8 bg-white">
            <div className="max-w-7xl mx-auto">
                {/* Section Header */}
                <div className="text-center mb-8">
                    <h2 className={`${figtree.className} text-5xl font-semibold mb-4`}>
                        Browse by city
                    </h2>
                    <p className={`${figtree.className} text-lg text-gray-600`}>
                        Experience different cities and vibes by staying with PakStay
                    </p>
                </div>

                {/* City Tabs */}
                <div className="flex justify-center mb-12">
                    <div className="inline-flex border-2 border-black p-2">
                        {cities.map((city) => (
                            <button
                                key={city}
                                onClick={() => setSelectedCity(city)}
                                className={`${figtree.className} px-10 py-3 text-base font-bold transition-all duration-300 gap-2
                                    ${selectedCity === city 
                                        ? 'bg-[#E7FE78] text-black uppercase' 
                                        : 'bg-transparent text-gray-700 hover:bg-[#E7FE78] uppercase'
                                    }`}
                            >
                                {city}
                            </button>
                        ))}
                    </div>
                </div>

                {/* Property Cards Grid */}
                <div className="relative px-16">
                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                        {propertiesByCity[selectedCity].map((property) => (
                            <div
                                key={property.id}
                                className="group cursor-pointer border border-black border-2 overflow-hidden"
                            >
                                {/* Image Container */}
                                <div className="relative aspect-[16/14] overflow-hidden">
                                    <Image
                                        src={property.image}
                                        alt={property.title}
                                        fill
                                        className="object-cover group-hover:scale-105 transition-transform duration-300"
                                    />
                                </div>

                                {/* Property Details */}
                                <div className="space-y-1 p-4">
                                    {/* Location */}
                                    <div className="flex items-center justify-between">
                                        <p className={`${figtree.className} text-xs font-semibold text-gray-700 tracking-wider`}>
                                            {property.city}
                                        </p>
                                        <div className="flex items-center gap-1">
                                            <svg className="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
                                                <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
                                            </svg>
                                            <span className={`${figtree.className} text-sm font-medium`}>
                                                {property.rating}
                                            </span>
                                        </div>
                                    </div>

                                    {/* Title */}
                                    <h3 className={`${figtree.className} text-base font-normal text-gray-900`}>
                                        {property.title}
                                    </h3>

                                    {/* Price */}
                                    <p className={`${figtree.className} text-base`}>
                                        <span className="font-semibold">₨{property.price.toLocaleString()}</span>
                                        <span className="text-gray-600"> night</span>
                                    </p>
                                </div>
                            </div>
                        ))}
                    </div>

                    {/* Navigation Arrows */}
                    <button className="absolute left-0 top-1/2 -translate-y-1/2 w-10 h-10 bg-transparent rounded-full border border-black flex items-center justify-center transition-shadow">
                        <svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                            <path d="M15 18l-6-6 6-6"/>
                        </svg>
                    </button>
                    <button className="absolute right-0 top-1/2 -translate-y-1/2 w-10 h-10 bg-transparent rounded-full border border-black flex items-center justify-center transition-shadow">
                        <svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                            <path d="M9 18l6-6-6-6"/>
                        </svg>
                    </button>
                </div>

                {/* Pagination Dots */}
                <div className="flex justify-center gap-2 mt-8">
                    {[0, 1, 2, 3, 4, 5].map((dot, index) => (
                        <button
                            key={dot}
                            className={`w-2 h-2 rounded-full transition-colors ${
                                index === 0 ? 'bg-gray-900' : 'bg-gray-300'
                            }`}
                        />
                    ))}
                </div>
            </div>
        </div>
    )
}

export default BrowseByCity;