"use client"
import { ArrowHeadSVG } from '@/assets/svg'
import { AnimationWrapper5 } from '@/components/ui/animations'
import { S } from '@/components/ui/typography'
import { Circle, Lock, Plus, RotateCw, Upload } from 'lucide-react'
import React from 'react'

const OverviewNavBar = () => {
    return (
        <div className=' bg-white rounded-t-md  w-full p-4  border-b border-gray-100'>
            <AnimationWrapper5 className='flex items-center justify-between'>
                <div className='flex items-center gap-4 '>
                    <div className='flex items-center gap-1'>
                        <AnimationWrapper5 isChild>
                            <Circle className='w-2 h-2 fill-destructive text-destructive' />
                        </AnimationWrapper5>
                        <AnimationWrapper5 isChild>
                            <Circle className='w-2 h-2 fill-orange-300 text-orange-300' />
                        </AnimationWrapper5>
                        <AnimationWrapper5 isChild>
                            <Circle className='w-2 h-2 fill-lime-500 text-lime-500 ' />
                        </AnimationWrapper5>
                    </div>

                    <div className='flex items-center gap-1'>
                        <AnimationWrapper5 isChild>
                            <ArrowHeadSVG className={"rotate-90 text-gray-500 w-5 h-5"} />
                        </AnimationWrapper5>
                        <AnimationWrapper5 isChild>
                            <ArrowHeadSVG className={"-rotate-90 text-gray-200 w-5 h-5"} />
                        </AnimationWrapper5>
                    </div>
                </div>
                <AnimationWrapper5 isChild>
                    <div className=' relative  flex items-center gap-3 bg-gray-100 p-[1px] px-32 rounded-md '>
                        <Lock className='w-3 h-3 text-gray-500' />
                        <S link='https://myfleet.dadycar.fr' className='!font-medium !text-[11px] hover:text-primary duration-300'>Myfleet.dadycar.fr</S>
                        <RotateCw className='absolute right-4 w-3 h-3 text-gray-500' />
                    </div>
                </AnimationWrapper5>
                <div className='flex items-center gap-4'>

                    <AnimationWrapper5 isChild>
                        <Upload className='w-4 h-4 text-gray-500' />
                    </AnimationWrapper5>
                    <AnimationWrapper5 isChild>
                        <Plus className='w-4 h-4 text-gray-500' />
                    </AnimationWrapper5>

                </div>
            </AnimationWrapper5>
        </div>
    )
}

export default OverviewNavBar