import { ProfileStatItem } from "@/types/profileStat";
import { motion } from "framer-motion";
import LocaleLink from "@/components/ui/LocaleLink";
import { memo } from "react";
import ProfileStats from "./ProfileStats";

export interface ProfileDropdownProps {
    stats: readonly ProfileStatItem[];
    onClose: () => void;
    onLogout: () => void;
}

const ProfileDropdown = memo(function ProfileDropdown({
    stats,
    onClose,
    onLogout,
}: ProfileDropdownProps) {
    return (
        <motion.div
            initial={{ opacity: 0, y: -8 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -8 }}
            transition={{ duration: 0.18, ease: "easeOut" }}
            className="fixed left-20 lg:left-0 right-0  top-24 lg:top-21 z-50 px-10 flex justify-end"
        >
            <div
                className="w-72 rounded-xl border border-gray-200 bg-white shadow-lg overflow-hidden"
                role="menu"
            >
                <ProfileStats stats={stats} />

                <div className="border-t border-gray-100 p-3 flex flex-col gap-2">
                    <LocaleLink href="/user" prefetch onClick={onClose} className="w-full text-center py-2 rounded-lg border border-gray-200 text-sm font-medium hover:bg-gray-50">
                        Dashboard
                    </LocaleLink>
                    <LocaleLink href="/user/profile" prefetch onClick={onClose} className="w-full text-center py-2 rounded-lg border border-gray-200 text-sm font-medium hover:bg-gray-50">
                        Settings
                    </LocaleLink>
                    <button onClick={onLogout} className="w-full  cursor-pointer py-2 rounded-lg bg-red-500 text-white text-sm font-medium hover:bg-red-600">
                        Logout
                    </button>
                </div>
            </div>
        </motion.div>
    );
});

export default ProfileDropdown;