import Image from 'next/image'
import { ChartNoAxesColumnIcon, ChevronRightIcon, SettingsIcon } from 'lucide-react'
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
import { getCurrentProduct } from '@/lib/utils'
type CollapsedSideNavbarProp = {
openSideNav: () => void
}
const CollapsedSideNavbar = ({ openSideNav }: CollapsedSideNavbarProp) => {
const currentProduct = getCurrentProduct()
return (
<div
style={{ background: currentProduct.color.background }}
className="h-screen flex flex-col p-2 space-y-3 items-center"
>
<div className="flex flex-col items-center gap-3">
<div className="space-y-2 px-1 py-2">
<Image src={currentProduct.asset.collapsedLogo} width={28} height={28} alt="" />
<button
onClick={openSideNav}
className="flex items-center justify-center rounded-full w-8 h-8 bg-white/10 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary"
>
<ChevronRightIcon className="text-[#ACACAD]" width={16} height={16} />
<span className="sr-only">Close</span>
</button>
</div>
<div className="w-10 h-10 bg-[#0B0A0F] p-2 flex items-center justify-center rounded-lg border border-[#201C2C]">
<div className="p-1 rounded bg-[#201C2C] flex items-center justify-center">
<div className="border border-white rounded-full flex items-center justify-center">
<ChartNoAxesColumnIcon
width={16}
height={16}
className="text-white p-0.5"
/>
</div>
</div>
</div>
</div>
<div className="flex-1">
<div className="w-10 h-12 grid place-items-center">
<Image src="/svgs/edit.svg" alt="" width={24} height={24} />
</div>
</div>
<div className="flex flex-col gap-0.5 items-center">
<Avatar>
<AvatarImage
src="https://github.com/kwpeepalytics.png"
width={40}
height={40}
/>
<AvatarFallback>PA</AvatarFallback>
</Avatar>
<div className="h-11 w-10 grid place-items-center">
<SettingsIcon width={20} height={20} className="text-[#97A3BB]" />
</div>
<div className="h-11 w-10 grid place-items-center">
<Image src="/svgs/log-out.svg" width={20} height={20} alt="" />
</div>
</div>
</div>
)
}
export default CollapsedSideNavbar