import { Button } from '@/components/ui/button';
import { Add, ArrowDown2, Eye, Pointer } from 'iconsax-react';
import { Download, PointerIcon, Redo2, Share2, Undo2 } from 'lucide-react';
import type { Metadata } from 'next';
import Image from 'next/image';
import Link from 'next/link';
import React from 'react';
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import ActionButtons from '../components/common/ActionButtons';
import Sidebar from '../components/common/SideBar';

export const metadata: Metadata = {
    title: 'Studio',
}

export interface Props {
    children: React.ReactNode
}

function layout({ children }: Props) {
    return (
        <div className="flex flex-col h-screen w-full">

            {/* NavBar */}
            <div className='w-full h-[80px]  flex items-center align-middle bg-white shadow-md justify-between pl-5 pr-5'>
                <div className='w-[60%] flex items-center align-middle justify-between gap-2 '>
                    <Image src="/images/logo.png" alt="logo" width={100} height={100} className='w-[116px] h-[53px]' />
                    <div className='flex items-center gap-4'>
                        <Link href="#" className='text-black '>Home</Link>
                        <Link href="#" className='text-black '>View</Link>
                        <Link href="#" className='text-black '>Help</Link>

                        <p className='text-gray-700 text-sm'>Last saved 5 seconds ago</p>
                    </div>
                    <div className='flex items-center gap-4'>
                        <Pointer size="20" color="#555555" className='cursor-pointer' />
                        <PointerIcon size="20" color="#555555" className=' cursor-pointer' />
                        <div className="flex items-center gap-1  cursor-pointer">
                            <p>100%</p>
                            <ArrowDown2 size="20" color="#555555" />
                        </div>
                        <div className="flex items-center gap-1">
                            <Undo2 size="20" color="#555555" className=' cursor-pointer' />
                            <Redo2 size="20" color="#555555" className=' cursor-pointer' />
                        </div>

                    </div>

                </div>
                <div className='flex w-[30%] gap-3 items-center align-middle'>
                    <Button variant='outline' className='h-10 w-10 p-2'>
                        <div className="h-5 w-5 bg-black rounded-full">.</div>
                    </Button>
                    <Button variant='outline' className='h-10 w-10 p-2'>
                        <Download size="20" color="#555555" />
                    </Button>
                    <Button variant='outline' className='h-10  p-2 flex gap-2'>
                        <Eye size="20" color="#555555" />
                        <p>Preview</p>
                    </Button>
                    <Button className='h-10  p-2 flex gap-2 bg-[#1A237E]'>
                        <Share2 size="20" color="#ffffff" />
                        <p>Share</p>
                    </Button>

                    <div className='flex relative'>
                        <Image src="/images/profile.jpeg" alt="profile" width={40} height={40} className='w-[40px] h-[40px] rounded-full z-10' />
                        <Button variant='outline' className='absolute right-0 left-7 h-10 w-10 p-2 rounded-full'>
                            <Add size="20" color="#555555" />
                        </Button>
                    </div>
                </div>

            </div>
            {/* End of NavBar */}

            {/* Main Content with Sidebar  */}
            <div className='flex w-full h-[calc(100vh-80px)]'>
                {/* Sidebar */}
                <Sidebar/>
                <div className='w-[80%] h-full bg-white'>
                {/* Inner NavBar */}
                <div className='w-full h-[59px]  flex items-center align-middle bg-white shadow-md justify-between pl-5 pr-5 border-t-2 border'>
                    <div className='w-[60%] flex flex-col gap-2 '>
                       <p>Pages 1</p>
                       <p>Pages 1</p>
                    </div>
                </div>
                    {children}
                    </div>
            </div>

        </div>
    );
}

export default layout