import { Button } from '@/components/ui/button';
import { AddSquare, Trash } from 'iconsax-react';
import Image from 'next/image';
import React from 'react';

export default function Studio() {
    return (
        <div className='w-[450px] flex flex-col gap-3 mt-24'>
            <div className='flex justify-between items-center w-full '>
                <p className='text-sm' >Page 1/1</p>
                <div className='flex gap-2'>
                    <AddSquare size={20} color='#555555' className="cursor-pointer hover:opacity-70 my-2" aria-label="Add page" />
                    <Trash size={20} color='#555555' className="cursor-pointer hover:opacity-70 my-2" aria-label="Delete page" />
                </div>

            </div>
            <div className='bg-white rounded-lg flex justify-around w-[450px] p-5'>
                <Image src={"/images/Ebook.png"} alt="image1" width={100} height={550} className='w-[350px] h-[450px]' />
            </div>
            <Button variant="outline" className='w-full bg-transparent  p-2'>Add new page</Button>
        </div>
    )
}