"use client";

import { useState, useRef, useEffect } from "react";
import localFont from "next/font/local";
import gsap from "gsap";
import { useGSAP } from "@gsap/react";
import Image from "next/image";
import {
    House,
    Buildings,
    Farm,
    Bed,
    MapPin,
    Camera,
    WifiHigh,
    Article,
    CurrencyDollar,
    CheckCircle,
    CalendarBlank,
    ShieldCheck,
    CaretLeft,
    CaretRight,
    Star,
    SwimmingPool,
    Car,
    CookingPot,
    TelevisionSimple,
    Wind,
    X,
    WarningCircle,
} from "@phosphor-icons/react/dist/ssr";

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

// Shared styles matching search.tsx and results.tsx
const containerStyle = `flex flex-col gap-8 w-full max-w-xl mx-auto pb-24`; // Added padding bottom for fixed footer
const titleStyle = `${figtree.className} text-4xl font-bold mb-2`;
const subtitleStyle = `${figtree.className} text-lg text-gray-500 mb-8`;
const inputStyle = `${figtree.className} w-full p-4 border-2 border-black text-lg outline-none focus:bg-[#F7F7F7] transition-colors placeholder:text-gray-400`;
const buttonStyle = `${figtree.className} flex items-center justify-center gap-2 px-8 py-3 border-2 border-black bg-[#E7FE78] text-lg font-medium hover:bg-[#dcfc4e] transition-colors disabled:opacity-50 disabled:cursor-not-allowed shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] hover:translate-y-[2px] hover:shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] active:translate-y-[4px] active:shadow-none transition-all`;
const secondaryButtonStyle = `${figtree.className} flex items-center justify-center gap-2 px-8 py-3 border-2 border-black bg-white text-lg font-medium hover:bg-gray-50 transition-colors shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] hover:translate-y-[2px] hover:shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] active:translate-y-[4px] active:shadow-none transition-all`;
const optionCardStyle = (selected: boolean) =>
    `flex flex-col items-center justify-center gap-4 p-6 border-2 border-black cursor-pointer transition-all ${selected ? 'bg-[#E7FE78]' : 'bg-white hover:bg-gray-50'}`;

interface FormData {
    propertyType?: string;
    placeType?: string;
    location?: string;
    guests?: number;
    bedrooms?: number;
    beds?: number;
    bathrooms?: number;
    amenities?: string[];
    description?: string;
    price?: string;
    instantBook?: boolean;
    safety?: string[];
    title?: string; // Added title for preview
    photos?: string[];
}

type FormValue = string | number | boolean | string[] | undefined;

interface StepProps {
    data: FormData;
    updateData: (key: keyof FormData, value: FormValue) => void;
}

/* --- Live Preview Component --- */
const LivePreview = ({ data }: { data: FormData }) => {
    // Helpers to derive display values
    const getCity = () => {
        if (!data.location) return "YOUR CITY";
        const parts = data.location.split(',');
        return parts[0].trim().toUpperCase();
    };

    const getTitle = () => {
        if (data.title) return data.title;
        const type = data.propertyType ? data.propertyType.charAt(0).toUpperCase() + data.propertyType.slice(1) : "Property";
        const place = data.placeType === 'entire' ? 'Entire place' : data.placeType === 'room' ? 'Private room' : 'Shared room';
        return `${type} · ${place}`;
    };

    const getPrice = () => {
        return data.price ? `₨${parseInt(data.price).toLocaleString()}` : "₨0";
    };

    return (
        <div className="w-full max-w-md mx-auto sticky top-24">
            <div className="bg-white border-2 border-black p-6 shadow-[8px_8px_0px_0px_rgba(0,0,0,1)]">
                <div className="flex items-center justify-between mb-4">
                    <h3 className={`${figtree.className} text-xl font-bold`}>Preview</h3>
                    <div className="px-3 py-1 bg-black text-white text-xs font-bold uppercase tracking-wider rounded-full">
                        New
                    </div>
                </div>

                {/* Card Replica */}
                <div className="border-2 border-black overflow-hidden bg-white">
                    {/* Image Placeholder */}
                    <div className="relative aspect-[16/14] bg-gray-100 flex items-center justify-center border-b-2 border-black overflow-hidden">
                        {data.photos && data.photos.length > 0 ? (
                            <Image src={data.photos[0]} alt="Preview" fill className="object-cover" />
                        ) : (
                            <div className="flex flex-col items-center gap-2 text-gray-400">
                                <Camera size={48} />
                                <span className={`${figtree.className} font-medium`}>Cover Photo</span>
                            </div>
                        )}
                    </div>

                    {/* Details */}
                    <div className="p-4 space-y-2">
                        <div className="flex items-center justify-between">
                            <p className={`${figtree.className} text-xs font-bold text-gray-700 tracking-wider uppercase`}>
                                {getCity()}
                            </p>
                            <div className="flex items-center gap-1">
                                <Star size={16} weight="fill" />
                                <span className={`${figtree.className} text-sm font-medium`}>New</span>
                            </div>
                        </div>

                        <h3 className={`${figtree.className} text-base font-normal text-gray-900 line-clamp-1`}>
                            {getTitle()}
                        </h3>

                        <p className={`${figtree.className} text-base`}>
                            <span className="font-bold">{getPrice()}</span>
                            <span className="text-gray-600"> night</span>
                        </p>
                    </div>
                </div>

                {/* Live Updates Summary */}
                <div className="mt-6 space-y-3 border-t-2 border-gray-100 pt-4">
                    <div className="flex justify-between text-sm">
                        <span className="text-gray-500">Guests</span>
                        <span className="font-medium">{data.guests || 0}</span>
                    </div>
                    <div className="flex justify-between text-sm">
                        <span className="text-gray-500">Amenities</span>
                        <span className="font-medium">{data.amenities?.length || 0} selected</span>
                    </div>
                </div>
            </div>
        </div>
    );
};

/* --- Step Components --- */

const PropertyType = ({ data, updateData }: StepProps) => {
    const types = [
        { id: 'house', label: 'House', icon: House },
        { id: 'flat', label: 'Flat', icon: Buildings },
        { id: 'farmhouse', label: 'Farmhouse', icon: Farm },
        { id: 'guesthouse', label: 'Guesthouse', icon: Bed },
    ];

    return (
        <div className="flex flex-col">
            <h2 className={titleStyle}>What kind of place will you host?</h2>
            <p className={subtitleStyle}>Select the category that best describes your property.</p>
            <div className="grid grid-cols-2 gap-4">
                {types.map((type) => (
                    <button
                        key={type.id}
                        type="button"
                        onClick={() => updateData('propertyType', type.id)}
                        className={optionCardStyle(data.propertyType === type.id)}
                    >
                        <type.icon size={48} weight={data.propertyType === type.id ? "fill" : "light"} />
                        <span className={`${figtree.className} text-xl font-medium`}>{type.label}</span>
                    </button>
                ))}
            </div>
        </div>
    )
}

const PropertyPlaceType = ({ data, updateData }: StepProps) => {
    const places = [
        { id: 'entire', label: 'An entire place', description: 'Guests have the entire property to themselves, with full privacy and unrestricted access.' },
        { id: 'room', label: 'A room', description: 'Guests have their own private room within the home, along with comfortable access to shared spaces.' },
        { id: 'shared', label: 'A shared room', description: 'Guests sleep in a room or common area that may be shared with others.' },
    ];

    return (
        <div className="flex flex-col">
            <h2 className={titleStyle}>What type of place will guests have?</h2>
            <p className={subtitleStyle}>Choose the level of privacy your guests will enjoy.</p>
            <div className="flex flex-col gap-4">
                {places.map((place) => (
                    <button
                        key={place.id}
                        type="button"
                        onClick={() => updateData('placeType', place.id)}
                        className={`${optionCardStyle(data.placeType === place.id)} flex-row justify-between text-left items-center w-full p-6`}
                    >
                        <div className="flex flex-col gap-1">
                            <span className={`${figtree.className} text-xl font-bold`}>{place.label}</span>
                            <span className={`${figtree.className} text-gray-600`}>{place.description}</span>
                        </div>
                        {data.placeType === place.id && <CheckCircle size={32} weight="fill" />}
                    </button>
                ))}
            </div>
        </div>
    )
}

const PropertyLocation = ({ data, updateData }: StepProps) => {
    return (
        <div className="flex flex-col">
            <h2 className={titleStyle}>Where's your place located?</h2>
            <p className={subtitleStyle}>Your address is only shared with guests after they've made a reservation.</p>
            <div className="flex flex-col gap-6">
                <div className="relative">
                    <MapPin size={24} className="absolute left-4 top-1/2 -translate-y-1/2 text-gray-500" />
                    <input
                        type="text"
                        placeholder="Enter your address"
                        className={`${inputStyle} pl-12`}
                        value={data.location || ''}
                        onChange={(e) => updateData('location', e.target.value)}
                    />
                </div>
                <div className="w-full h-80 bg-gray-100 border-2 border-black flex flex-col items-center justify-center gap-4 relative overflow-hidden group">
                    <div className="absolute inset-0 opacity-10 bg-[radial-gradient(#000_1px,transparent_1px)] [background-size:16px_16px]" />
                    <MapPin size={48} className="text-gray-400 group-hover:text-black transition-colors duration-300" weight="fill" />
                    <span className={`${figtree.className} text-gray-500 font-medium`}>Map Preview</span>
                </div>
            </div>
        </div>
    )
}

const PropertyCapacity = ({ data, updateData }: StepProps) => {
    const counters: { key: keyof FormData; label: string }[] = [
        { key: 'guests', label: 'Guests' },
        { key: 'bedrooms', label: 'Bedrooms' },
        { key: 'beds', label: 'Beds' },
        { key: 'bathrooms', label: 'Bathrooms' },
    ];

    const updateCount = (key: keyof FormData, delta: number) => {
        const current = (data[key] as number) || 0;
        updateData(key, Math.max(0, current + delta));
    };

    return (
        <div className="flex flex-col">
            <h2 className={titleStyle}>Share some basics about your place</h2>
            <p className={subtitleStyle}>You'll add more details later, like bed types.</p>
            <div className="flex flex-col gap-6">
                {counters.map((item) => (
                    <div key={item.key} className="flex items-center justify-between border-b-2 border-gray-100 pb-6">
                        <span className={`${figtree.className} text-xl font-medium`}>{item.label}</span>
                        <div className="flex items-center gap-6">
                            <button
                                type="button"
                                onClick={() => updateCount(item.key, -1)}
                                disabled={!data[item.key]}
                                className="w-12 h-12 rounded-full border-2 border-black flex items-center justify-center hover:bg-gray-100 disabled:opacity-30 disabled:hover:bg-transparent transition-colors"
                            >
                                <span className="text-2xl mb-1">-</span>
                            </button>
                            <span className={`${figtree.className} text-xl w-8 text-center font-bold`}>{data[item.key] || 0}</span>
                            <button
                                type="button"
                                onClick={() => updateCount(item.key, 1)}
                                className="w-12 h-12 rounded-full border-2 border-black flex items-center justify-center hover:bg-gray-100 transition-colors"
                            >
                                <span className="text-2xl mb-1">+</span>
                            </button>
                        </div>
                    </div>
                ))}
            </div>
        </div>
    )
}

const PropertyAmenities = ({ data, updateData }: StepProps) => {
    const amenities = [
        { id: 'wifi', label: 'Wi-Fi', icon: WifiHigh },
        { id: 'kitchen', label: 'Kitchen', icon: CookingPot },
        { id: 'parking', label: 'Free parking', icon: Car },
        { id: 'pool', label: 'Pool', icon: SwimmingPool },
        { id: 'ac', label: 'Air conditioning', icon: Wind }, // Using House as placeholder for AC if needed
        { id: 'tv', label: 'TV', icon: TelevisionSimple },
    ];

    const toggleAmenity = (id: string) => {
        const current = data.amenities || [];
        const updated = current.includes(id)
            ? current.filter((item: string) => item !== id)
            : [...current, id];
        updateData('amenities', updated);
    };

    return (
        <div className="flex flex-col">
            <h2 className={titleStyle}>What does your place offer?</h2>
            <p className={subtitleStyle}>You can add more amenities after you publish.</p>
            <div className="grid grid-cols-2 gap-4">
                {amenities.map((amenity) => (
                    <button
                        key={amenity.id}
                        type="button"
                        onClick={() => toggleAmenity(amenity.id)}
                        className={`${optionCardStyle((data.amenities || []).includes(amenity.id))} items-start w-full text-left`}
                    >
                        <amenity.icon size={32} weight={(data.amenities || []).includes(amenity.id) ? "fill" : "regular"} />
                        <span className={`${figtree.className} text-lg font-medium`}>{amenity.label}</span>
                    </button>
                ))}
            </div>
        </div>
    )
}

const PropertyDescription = ({ data, updateData }: StepProps) => {
    return (
        <div className="flex flex-col">
            <h2 className={titleStyle}>How would you describe your place?</h2>
            <p className={subtitleStyle}>Short and sweet works best.</p>
            <div className="flex flex-col gap-6">
                <div>
                    <label className="block text-sm font-bold mb-2">Title</label>
                    <input
                        type="text"
                        placeholder="e.g. Cozy Cottage in the Hills"
                        className={inputStyle}
                        value={data.title || ''}
                        onChange={(e) => updateData('title', e.target.value)}
                    />
                </div>
                <div>
                    <label className="block text-sm font-bold mb-2">Description</label>
                    <textarea
                        placeholder="This unique place has a style all its own..."
                        className={`${inputStyle} h-48 resize-none`}
                        value={data.description || ''}
                        onChange={(e) => updateData('description', e.target.value)}
                    />
                </div>
            </div>
        </div>
    )
}

const PropertyPhotos = ({ data, updateData }: StepProps) => {
    const fileInputRef = useRef<HTMLInputElement>(null);

    const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        if (e.target.files) {
            const newPhotos = Array.from(e.target.files).map(file => URL.createObjectURL(file));
            const currentPhotos = data.photos || [];
            updateData('photos', [...currentPhotos, ...newPhotos]);
        }
    };

    const removePhoto = (index: number) => {
        const currentPhotos = data.photos || [];
        const updated = currentPhotos.filter((_, i) => i !== index);
        updateData('photos', updated);
    };

    return (
        <div className="flex flex-col">
            <h2 className={titleStyle}>Add some photos of your house</h2>
            <p className={subtitleStyle}>You'll need 5 photos to get started. You can add more or make changes later.</p>

            <div className="flex flex-col gap-6">
                <div
                    onClick={() => fileInputRef.current?.click()}
                    className="border-2 border-dashed border-gray-300 rounded-lg p-12 flex flex-col items-center justify-center gap-4 cursor-pointer hover:bg-gray-50 transition-colors"
                >
                    <Camera size={48} className="text-gray-400" />
                    <span className={`${figtree.className} text-lg font-medium underline`}>Upload photos</span>
                    <span className="text-sm text-gray-500">JPG, PNG up to 10MB</span>
                    <input
                        type="file"
                        multiple
                        accept="image/*"
                        className="hidden"
                        ref={fileInputRef}
                        onChange={handleFileChange}
                    />
                </div>

                {data.photos && data.photos.length > 0 && (
                    <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
                        {data.photos.map((photo, index) => (
                            <div key={index} className="relative aspect-square border-2 border-black rounded-lg overflow-hidden group">
                                <Image src={photo} alt={`Property ${index + 1}`} fill className="object-cover" />
                                <button
                                    onClick={() => removePhoto(index)}
                                    className="absolute top-2 right-2 bg-white rounded-full p-1 border-2 border-black hover:bg-red-50 transition-colors z-10"
                                >
                                    <X size={16} />
                                </button>
                                {index === 0 && (
                                    <div className="absolute bottom-2 left-2 bg-black text-white text-xs px-2 py-1 rounded z-10">Cover Photo</div>
                                )}
                            </div>
                        ))}
                    </div>
                )}

                {(!data.photos || data.photos.length < 5) && (
                    <div className="flex items-center gap-2 text-orange-600 bg-orange-50 p-4 rounded-lg border border-orange-200">
                        <WarningCircle size={24} />
                        <span className="font-medium">Please upload at least {5 - (data.photos?.length || 0)} more photos</span>
                    </div>
                )}
            </div>
        </div>
    )
}

const PropertyPrice = ({ data, updateData }: StepProps) => {
    return (
        <div className="flex flex-col">
            <h2 className={titleStyle}>Now, set your price</h2>
            <p className={subtitleStyle}>You can change it anytime.</p>
            <div className="flex flex-col gap-8 items-center py-12 bg-[#F7F7F7] border-2 border-black">
                <div className="relative w-full max-w-xs">
                    <span className="absolute left-4 top-1/2 -translate-y-1/2 text-4xl font-bold text-gray-400">₨</span>
                    <input
                        type="number"
                        placeholder="0"
                        className="w-full bg-transparent text-6xl font-bold text-center outline-none p-4"
                        value={data.price || ''}
                        onChange={(e) => updateData('price', e.target.value)}
                    />
                </div>
                <p className={`${figtree.className} text-xl text-gray-500`}>per night</p>
            </div>
        </div>
    )
}

const PropertyInstantApproval = ({ data, updateData }: StepProps) => {
    return (
        <div className="flex flex-col">
            <h2 className={titleStyle}>Decide how you'll confirm reservations</h2>
            <div className="flex flex-col gap-4">
                <button
                    type="button"
                    onClick={() => updateData('instantBook', true)}
                    className={`${optionCardStyle(data.instantBook === true)} w-full flex-row items-start text-left`}
                >
                    <CheckCircle size={32} weight={data.instantBook === true ? "fill" : "regular"} className="shrink-0" />
                    <div className="flex flex-col">
                        <span className="font-bold text-lg">Use Instant Book</span>
                        <span className="text-gray-600">Guests can book automatically. No need to approve reservations.</span>
                    </div>
                </button>
                <button
                    type="button"
                    onClick={() => updateData('instantBook', false)}
                    className={`${optionCardStyle(data.instantBook === false)} w-full flex-row items-start text-left`}
                >
                    <Article size={32} weight={data.instantBook === false ? "fill" : "regular"} className="shrink-0" />
                    <div className="flex flex-col">
                        <span className="font-bold text-lg">Approve manually</span>
                        <span className="text-gray-600">You approve or decline booking requests. You will be notified of each booking request.</span>
                    </div>
                </button>
            </div>
        </div>
    )
}

const SafetyDetails = ({ data, updateData }: StepProps) => {
    const safetyItems = [
        { id: 'camera', label: 'Security camera(s)', icon: Camera },
        { id: 'weapons', label: 'Dangerous weapons', icon: ShieldCheck },
        { id: 'animals', label: 'Dangerous animals', icon: Farm },
    ];

    const toggleSafety = (id: string) => {
        const current = data.safety || [];
        const updated = current.includes(id)
            ? current.filter((item: string) => item !== id)
            : [...current, id];
        updateData('safety', updated);
    };

    return (
        <div className="flex flex-col">
            <h2 className={titleStyle}>Does your place have any of these?</h2>
            <div className="flex flex-col gap-4">
                {safetyItems.map((item) => (
                    <button
                        key={item.id}
                        type="button"
                        onClick={() => toggleSafety(item.id)}
                        className={`${optionCardStyle((data.safety || []).includes(item.id))} flex-row justify-between items-center w-full`}
                    >
                        <div className="flex items-center gap-4">
                            <item.icon size={32} />
                            <span className={`${figtree.className} text-lg font-medium`}>{item.label}</span>
                        </div>
                        <div className={`w-6 h-6 rounded-full border-2 border-black flex items-center justify-center transition-colors ${(data.safety || []).includes(item.id) ? 'bg-black' : 'bg-transparent'}`}>
                            {(data.safety || []).includes(item.id) && <div className="w-2 h-2 bg-white rounded-full" />}
                        </div>
                    </button>
                ))}
            </div>
        </div>
    )
}

/* --- Main List Component --- */

function List() {
    const [step, setStep] = useState(0);
    const [direction, setDirection] = useState(1);
    const [formData, setFormData] = useState<FormData>({
        guests: 1,
        bedrooms: 1,
        beds: 1,
        bathrooms: 1,
    });
    const contentRef = useRef<HTMLDivElement>(null);

    const steps = [
        PropertyType,
        PropertyPlaceType,
        PropertyLocation,
        PropertyCapacity,
        PropertyAmenities,
        PropertyDescription,
        PropertyPhotos,
        PropertyPrice,
        PropertyInstantApproval,
        SafetyDetails
    ];

    const CurrentStepComponent = steps[step];
    const totalSteps = steps.length;
    const progress = ((step + 1) / totalSteps) * 100;

    const updateData = (key: keyof FormData, value: FormValue) => {
        setFormData(prev => ({ ...prev, [key]: value }));
    };

    const handleNext = () => {
        // Validation for photos
        if (step === 6 && (!formData.photos || formData.photos.length < 5)) {
            alert("Please upload at least 5 photos to continue.");
            return;
        }

        if (step < steps.length - 1) {
            setDirection(1);
            setStep(prev => prev + 1);
        }
    };

    const handleBack = () => {
        if (step > 0) {
            setDirection(-1);
            setStep(prev => prev - 1);
        }
    };

    useGSAP(() => {
        if (!contentRef.current) return;
        gsap.fromTo(contentRef.current,
            { x: direction * 20, opacity: 0 },
            { x: 0, opacity: 1, duration: 0.4, ease: "power2.out" }
        );
    }, [step]);

    return (
        <div className="flex min-h-screen w-full bg-white">
            {/* Left Panel - Form */}
            <div className="w-full lg:w-1/2 flex flex-col h-screen relative">
                {/* Header */}
                <div className="px-8 py-6 border-b-2 border-gray-100 flex justify-between items-center bg-white z-10">
                    <div className="flex items-center gap-4">
                        <div className="w-10 h-10 bg-black text-white rounded-full flex items-center justify-center font-bold text-lg">
                            {step + 1}
                        </div>
                        <div className="flex flex-col">
                            <span className={`${figtree.className} font-bold text-sm uppercase tracking-wider`}>Step {step + 1} of {totalSteps}</span>
                            <span className={`${figtree.className} text-xs text-gray-500`}>{
                                step === 0 ? "Basics" :
                                    step < 4 ? "Details" :
                                        step < 7 ? "Description" : "Finish"
                            }</span>
                        </div>
                    </div>
                    <button className="text-sm font-bold underline decoration-2 underline-offset-4 hover:text-gray-600">Save & Exit</button>
                </div>

                {/* Progress Bar */}
                <div className="w-full h-1 bg-gray-100">
                    <div
                        className="h-full bg-[#E7FE78] transition-all duration-500 ease-out"
                        style={{ width: `${progress}%` }}
                    />
                </div>

                {/* Scrollable Content */}
                <div className="flex-1 overflow-y-auto p-8 md:p-12">
                    <div ref={contentRef} className={containerStyle}>
                        <CurrentStepComponent
                            data={formData}
                            updateData={updateData}
                        />
                    </div>
                </div>

                {/* Fixed Footer Navigation */}
                <div className="border-t-2 border-gray-100 p-6 bg-white flex justify-between items-center z-10">
                    <button
                        type="button"
                        onClick={handleBack}
                        disabled={step === 0}
                        className={`${secondaryButtonStyle} ${step === 0 ? 'opacity-0 pointer-events-none' : ''}`}
                    >
                        <CaretLeft size={20} /> Back
                    </button>
                    <button
                        type="button"
                        onClick={handleNext}
                        className={buttonStyle}
                    >
                        {step === totalSteps - 1 ? 'Finish' : 'Next'} <CaretRight size={20} />
                    </button>
                </div>
            </div>

            {/* Right Panel - Live Preview */}
            <div className="hidden lg:flex w-1/2 bg-[#F7F7F7] border-l-2 border-black relative flex-col items-center justify-center p-12 overflow-hidden">
                {/* Background Pattern */}
                <div className="absolute inset-0 opacity-5"
                    style={{
                        backgroundImage: `radial-gradient(circle at 2px 2px, black 1px, transparent 0)`,
                        backgroundSize: '24px 24px'
                    }}
                />

                <div className="relative z-10 w-full max-w-lg">
                    <div className="mb-8 text-center">
                        <h2 className={`${figtree.className} text-3xl font-bold mb-2`}>What guests will see</h2>
                        <p className={`${figtree.className} text-gray-500`}>As you update your listing, see how it looks in search results.</p>
                    </div>
                    <LivePreview data={formData} />
                </div>
            </div>
        </div>
    )
}

export default List;
