import React , {useEffect, useState} from 'react';

import image from '../assets/houses/[Link]';

import { ArrowRight, BathIcon, DoorOpenIcon, EggFried, Locate, Store, ToiletIcon,
StarIcon, Heart, Building } from 'lucide-react';
import { MapPin } from 'lucide-react';
import '../[Link]';

function List_products() {
// Track liked state for each property using an object with property indices as
keys
const [likedProperties, setLikedProperties] = useState({});
const [likeCounts, setLikeCounts] = useState({});

const [Selected , setSelected] = useState('all');

const [Houses, setHouses] = useState([]);

useEffect(()=>{
const fetchHouses = async()=>{
try {
const respond = await fetch('../components/[Link]');
const data = await [Link]();
[Link](data);
setHouses(data);
} catch (error) {
[Link]('Error fetching houses:', error);
}
};
fetchHouses();
},[]);

const handleFilter = (type) => {

setSelected(type);
};

const handleHeartClick = (propertyIndex) => {

const isCurrentlyLiked = likedProperties[propertyIndex] || false;
const currentCount = likeCounts[propertyIndex] || 0;

// Update liked state for this specific property

setLikedProperties(prev => ({
...prev,
[propertyIndex]: !isCurrentlyLiked
}));

// Update count for this specific property

setLikeCounts(prev => ({
...prev,
[propertyIndex]: isCurrentlyLiked ? currentCount - 1 : currentCount + 1
}));
};

const properties = [
{
image: `${image}`,
name: 'Akansas Cite',
location: 'Dirty South',
type: 'Hostel',
rooms: 2,
kitchen: 1,
 toilet: 1,
price: '500,000',
rating: 5+'.'+0
},
{
image: `${image}`,
name: 'Big Brother Cite',
location: 'Dirty South',
type: 'Hostel',
rooms: 2,
kitchen: 1,
toilet: 2,
price: '800,000',
rating: 4.5
},
{
image: `${image}`,
name: 'Camtel Studio',
location: 'Biaka streets',
type: 'Studio',
rooms: 2,
kitchen: 1,
toilet: 2,
price: '350,000',
rating: 4.5
},
{
image: `${image}`,
name: 'Convenant Cite',
location: 'Mayor street',
type: 'Hostel',
rooms: 2,
kitchen: 1,
toilet: 1,
price: '650,000',
rating: 4.5
},
{
image: `${image}`,
name: 'Sinners Apartment',
location: 'Malingo junction',
type: 'Flat',
rooms: 2,
kitchen: 1,
toilet: 1,
price: '500,000',
rating: 5+'.'+0
},
{
image: `${image}`,
name: 'Italio Cite',
location: 'Dirty South',
type: 'Hostel',
rooms: 2,
kitchen: 1,
toilet: 1,
price: '400,000',
rating: 4.5
},
{
image: `${image}`,
name: 'Danny Studio',
location: 'Bomaka chief street',
type: 'Studio',
rooms: 3,
kitchen: 1,
toilet: 3,
price: '1,500,000',
rating: 4.5
},
{
image: `${image}`,
name: 'Boma Apartment',
location: 'Bomaka chief street',
type: 'Flat',
rooms: 3,
kitchen: 1,
toilet: 3,
price: '1,000,000',
rating: 4.5
},
{
image: `${image}`,
name: 'Shina Studio',
location: 'Mayor streets',
type: 'Studio',
rooms: 2,
kitchen: 1,
toilet: 2,
price: '850,000',
rating: 4.5
},
{
image: `${image}`,
name: 'Casavana Cite',
location: 'Mayor street',
type: 'Hostel',
rooms: 2,
kitchen: 1,
toilet: 1,
price: '550,000',
rating: 5+'.'+0
},
{
image: `${image}`,
name: 'Quando Apartment',
location: 'Molyko',
type: 'Flat',
rooms: 2,
kitchen: 1,
toilet: 1,
price: '830,000',
rating: 4.5
},
{
image: `${image}`,
name: 'Freddy Apartment',
location: 'Bonouma',
 type: 'Flat',
rooms: 3,
kitchen: 1,
toilet: 3,
price: '600,000',
rating: 4.5
},
{
image: `${image}`,
name: 'Mimba Apartment',
location: 'Mayor street',
type: 'Flat',
rooms: 3,
kitchen: 1,
toilet: 3,
price: '980,000',
rating: 4.5
},
{
image: `${image}`,
name: 'Cosmo Studio',
location: 'Mayor street',
type: 'Studio',
rooms: 3,
kitchen: 1,
toilet: 3,
price: '550,000',
rating: 5+'.'+0
},
{
image: `${image}`,
name: 'Mboma Apartment',
location: 'Muea chief street',
type: 'Flat',
rooms: 3,
kitchen: 1,
toilet: 3,
price: '5,000,000',
rating: 4.5
},
{
image: `${image}`,
name: 'Persy Hostel',
location: 'Malingo',
type: 'Hostel',
rooms: 3,
kitchen: 1,
toilet: 3,
price: '600,000',
rating: 4.5
},
{
image: `${image}`,
name: 'Conty Studio',
location: 'Muea chief street',
type: 'Studio',
rooms: 3,
kitchen: 1,
toilet: 3,
 price: '600,000',
rating: 5+'.'+0
},
{
image: `${image}`,
name: 'Bassa Apartment',
location: 'Checkpoint',
type: 'Studio',
rooms: 3,
kitchen: 1,
toilet: 3,
price: '450,000',
rating: 4.5
},

return (
<section className='flex flex-wrap mx-auto justify-center'>
{/* Filter Buttons */}
<div className="mb-6 space-x-2 grid grid-cols-12 mx-auto md:space-x-16
py-5 px-3 ">
<button onClick={()=> handleFilter('all')} className={`px-2 col-span-
3 font-Custom font-medium text-sm py-2 rounded max-w-[8rem] ${Selected === 'all' ?
'bg-blue-500 text-white' : 'bg-gray-200'}`}>
All houses
</button>
<button onClick={()=> handleFilter('Studio')} className={`col-span-3
px-2 font-Custom font-medium text-sm py-2 rounded max-w-[10rem] ${Selected ===
'Studio' ? 'bg-blue-500 text-white' : 'bg-gray-200'}`}>
Studio
</button>
<button onClick={()=> handleFilter('Flats')} className={`col-span-3
px-2 font-Custom font-medium text-sm py-2 rounded max-w-[10rem] ${Selected ===
'Flats' ? 'bg-blue-500 text-white' : 'bg-gray-200'}`}>
Flats
</button>
<button onClick={()=> handleFilter('Hostel')} className={`col-span-3
px-2 font-Custom font-medium text-sm py-2 rounded max-w-[10rem] ${Selected ===
'Hostel' ? 'bg-blue-500 text-white' : 'bg-gray-200'}`}>
Hostel
</button>
</div>
{/* heart icon to keep track of the user likes and dislikes */}
{
[Link]((property, index) => {
const isLiked = likedProperties[index] || false;

return (
<div key={index} className='rounded-2xl shadow-md shadow-
gray-200 max-w-[18rem] bg-white p-3 relative'>
<button onClick={() => handleHeartClick(index)}
className='size-9 rounded-full bg-white shadow-md
shadow-gray-200 p-2 transition-colors absolute top-4 right-4 z-20 sm:top-4
sm:right-8 my-2
duration-200 hover:scale-110 transform'>
<Heart size={20} className={`${
isLiked ? 'text-red-600 fill-red-600' : 'text-gray-
400 hover:text-red-600'
 } transition-colors duration-200`}/>
</button>
<img src={image} alt="" className='w-full h-[11rem]
rounded-xl'/>
<div className='bg-gray-50 rounded-xl text-md my-2 px-2
py-2'>
<div className='flex items-center justify-between'>
<div>
<h1 className='w-full font-Custom font-bold text-
gray-800 text-md text-lg py-2'>
{/* data from the list properties api */}
{[Link]}
</h1>
</div>
<button className='flex items-baseline justify-center
gap-1'>
<Building size={20} color='skyblue' className='pt-
1.5'/>
<p className='font-Custom font-medium text-sm text-
blue-500'>
{[Link]}
</p>
</button>
</div>
{/* property location */}
<div className='flex items-center gap-2'>
<MapPin size={20} className='text-md text-gray-400
'/>
<p className='font-Custom font-medium text-gray-600
text-sm'>
{/* location */}
{[Link]}
</p>
</div>
{/* property listing and features */}
<div className='flex flex-row flex-nowrap justify-
between my-3 gap-1 items-center font-Custom text-sm'>
<div className='flex gap-1 items-center flex-
shrink-0'><DoorOpenIcon size={12} className='text-gray-600'/><p className='font-
Custom font-medium text-sm text-gray-600'>{[Link]} Rooms</p></div>{/* room
numbers */}
<div className='flex gap-1 items-center flex-
shrink-0'><EggFried size={12} className='text-gray-600'/><p className='font-Custom
font-medium text-sm text-gray-600'>{[Link]} Kitchen</p></div>{/* kitchen
numbers */}
<div className='flex items-center flex-shrink-0
gap-1'><ToiletIcon size={12} className='text-gray-600'/><p className='font-Custom
font-medium text-sm text-gray-600'>{[Link]} Toilet</p></div>{/* toilet
numbers */}
</div>
<div className='flex justify-between'>
{/* property price allocation */}
<div>
<h2 className='text-blue-600 font-Custom
font-bold text-lg'>
{[Link]} <span className='text-
blue-600'>frs</span>
</h2>
</div>
 {/* property rating */}
<div className='flex items-center gap-1'>
<StarIcon size={12} fill='orange'
color='orange'/>
<p className='text-sm font-Custom font-bold
text-gray-600'>{[Link]}</p>
</div>
</div>
</div>
</div>
)
})
}
</section>
)
}

export default List_products