1#@!#!123s

ALWAYS HENGHENG888 1#@!#!123s
: / var / www / smartweb / priyoholidays.com / src / components / pages / Packages /
Filename : FilterArea.jsx
back
'use client'

import Collapse from '@/components/common/Collapse'
import SeekCollapse from '@/components/common/SeekCollapse'
import Image from 'next/image'
import React, { useState } from 'react'
import { FaHeart, FaRegClock } from 'react-icons/fa'
import { BsPeople } from 'react-icons/bs'
import { IoMdCheckmark } from 'react-icons/io'
import { GrLocation } from 'react-icons/gr'
import { IoFilterSharp } from 'react-icons/io5'
import PrimaryButton from '@/components/buttons/PrimaryButton'
import Link from 'next/link'
import cn from '@/helpers/cn'

export default function FilterArea() {
    const [openFilter, setOpenFilter] = useState(false)

    const packages = [
        {
            img_src: '/assets/images/packages/pack1.jpg',
            img_alt: 'Package 1',
            title: 'Island Peak Climbing',
            destinations: ['Nepal', 'Pokhara', 'Tibet'],
            days: '3 Days 5 Nights',
            peoples: '8-12 People',
            cost: '$500',
            original_cost: '$569',
            discount_rate: '20%',
            description: 'Enim velit proident Lorem elit laboris magna excepteur non ut et.',
            next_dates: ['Aug 19', 'Aug 20', 'Aug 21'],
        },
        {
            img_src: '/assets/images/packages/pack2.jpg',
            img_alt: 'Package 2',
            title: 'Island Peak Climbing',
            destinations: ['Nepal', 'Pokhara', 'Tibet'],
            days: '3 Days 5 Nights',
            peoples: '8-12 People',
            cost: '$500',
            original_cost: '$569',
            discount_rate: '20%',
            description: 'Cillum laboris laboris voluptate veniam aliqua id officia aliqua est nulla.',
            next_dates: ['Aug 19', 'Aug 20', 'Aug 21'],
        },
        {
            img_src: '/assets/images/packages/pack3.jpg',
            img_alt: 'Package 3',
            title: 'Island Peak Climbing',
            destinations: ['Nepal', 'Pokhara', 'Tibet'],
            days: '3 Days 5 Nights',
            peoples: '8-12 People',
            cost: '$500',
            original_cost: '$569',
            discount_rate: '20%',
            description: 'Occaecat nostrud labore anim fugiat laborum elit sit incididunt elit irure occaecat irure tempor.',
            next_dates: ['Aug 19', 'Aug 20', 'Aug 21'],
        },
    ]
    return (
        // pb-12
        <div className='py-24'>
            <div className='hx-container flex flex-col md:flex-row justify-center items-start gap-7'>
                <div
                    className={cn('lg:hidden transition-[visibility] duration-500 fixed top-0 left-0 w-full h-full bg-black bg-opacity-60 z-[9999]', {
                        collapse: !openFilter,
                        visible: openFilter,
                    })}
                    onClick={() => setOpenFilter(false)}></div>
                <div
                    className={cn(
                        'fixed lg:static -right-full peer-hover:right-0 transition-[right] duration-500 top-6 border rounded-2xl bg-white z-[10000] max-h-[90dvh] lg:max-h-full overflow-y-auto min-h-[24rem] w-[90%] mr-2 lg:mr-0 lg:w-auto md:flex-[0_0_250px] lg:flex-[0_0_300px] p-7',
                        {
                            'right-0': openFilter,
                            '-right-full': !openFilter,
                        },
                    )}>
                    <h3 className='text-2xl font-[500]'>Criteria</h3>
                    <hr className='my-4' />
                    <Collapse
                        title='Package Type 1'
                        open={true}
                        options={[
                            { label: 'Single Country', count: 4 },
                            { label: 'Double Country', count: 1 },
                            { label: 'Multiple Country', count: 7 },
                        ]}
                    />
                    <hr className='my-4' />
                    <Collapse
                        title='Package Type 2'
                        open={true}
                        options={[
                            { label: 'Land Package', count: 9 },
                            { label: 'Full Package', count: 1 },
                            { label: 'Honey Moon Package', count: 7 },
                            { label: 'Group Package', count: 2 },
                            { label: 'Corporate Package', count: 5 },
                            { label: 'Family Package', count: 1 },
                        ]}
                    />
                    <hr className='my-4' />
                    <SeekCollapse title='Price' open={true} prefix='$' min={200} max={580} />
                    <hr className='my-4' />
                    <SeekCollapse title='Duration' open={true} suffix=' Days' min={0} max={9} />
                    <PrimaryButton className='w-full mt-6' noIcon={true} onClick={() => setOpenFilter(false)}>
                        Apply Filter
                    </PrimaryButton>
                    <button className='mx-auto block underline font-bold mt-6 lg:hidden' onClick={() => setOpenFilter(false)}>Cancel</button>
                </div>
                {/* </div> */}
                <div className='flex flex-col w-full gap-6'>
                    <div className='border rounded-2xl p-3 lg:p-5 flex justify-between items-center'>
                        <p>Showing 3 out of 3 items</p>
                        <button
                            className='hover:bg-slate-200 lg:hidden border border-transparent focus:bg-slate-200 focus:border-slate-400 w-9 flex justify-center items-center aspect-square rounded-md'
                            onClick={() => setOpenFilter(true)}>
                            <IoFilterSharp />
                        </button>
                    </div>
                    <div className='min-h-[24rem] w-full grid grid-cols-1 xl:grid-cols-2 gap-6'>
                        {packages.map((pack, index) => (
                            <div className='flex flex-col justify-center items-center rounded-2xl overflow-hidden border border-primary-lighten group hover:shadow-lg transition-shadow duration-200'>
                                <div className='w-full overflow-hidden'>
                                    <Image
                                        src={pack.img_src}
                                        width={0}
                                        height={0}
                                        sizes='100%'
                                        className='w-full aspect-[16/11] object-cover object-center group-hover:scale-110 transition-transform duration-500'
                                        alt={pack.img_alt}
                                    />
                                </div>
                                <div className='py-4 w-full'>
                                    <div className='flex justify-between items-center px-4'>
                                        <h3 className='text-xl font-[500]'>{pack.title}</h3>
                                        <FaHeart size={24} className='cursor-pointer text-gray-300 hover:text-primary-light transition-colors duration-200' />
                                    </div>
                                    <div className='flex justify-center items-center py-4 px-4 border-b'>
                                        <div className='flex flex-col justify-center items-start w-[55%] lg:w-[65%] gap-1 pr-6 text-gray-500'>
                                            <div className='flex justify-start items-center w-full gap-2'>
                                                <GrLocation size={18} className='text-primary' />
                                                <span>{pack.destinations.join(', ')}</span>
                                            </div>
                                            <div className='flex justify-start items-center w-full gap-2'>
                                                <FaRegClock size={15} className='text-primary ml-[2px]' />
                                                <span>{pack.days}</span>
                                            </div>
                                            <div className='flex justify-start items-center w-full gap-2'>
                                                <BsPeople size={15} className='text-primary ml-[2px]' />
                                                <span>{pack.peoples}</span>
                                            </div>
                                            <div className='py-1'>{pack.description}</div>
                                        </div>
                                        {/*  */}
                                        <div className='w-[45%] lg:w-[35%] border-l py-2 pl-6 space-y-2'>
                                            <div>
                                                <span className='text-xs text-white bg-primary hover:bg-primary-dark transition-colors duration-200 cursor-default px-4 py-1 rounded-full'>
                                                    {pack.discount_rate} Off
                                                </span>
                                            </div>
                                            <div className='flex justify-start items-center gap-2'>
                                                <span className='text-3xl font-semibold'>{pack.cost}</span>
                                                <span className='text-sm font-[600] text-gray-400 line-through'>{pack.original_cost}</span>
                                            </div>
                                            <div className='pt-4'>Next Departure</div>
                                            <div className='flex flex-col justify-center items-start gap-1'>
                                                {pack.next_dates.map((date, index) => (
                                                    <div key={index} className='flex justify-start items-center gap-1'>
                                                        <IoMdCheckmark size={14} className='text-primary' />
                                                        <span className='text-xs'>{date}</span>
                                                    </div>
                                                ))}
                                            </div>
                                        </div>
                                    </div>
                                    <div className='p-4 pb-0'>
                                        <Link href={'#'}>
                                            <PrimaryButton className='w-full' noIcon={true}>
                                                View Details
                                            </PrimaryButton>
                                        </Link>
                                    </div>
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
            </div>
        </div>
    )
}