Untitled

'use client'

import React from 'react'
import Link from 'next/link';
import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger } from '../sheet';
import { Armchair, Home, LucideIcon, Menu } from 'lucide-react';
import Button from '../Button';

interface SidebarItems {
    links: Array<{
        label: string,
        href: string,
        icon?: LucideIcon
    }>
}

const sidebarItems: SidebarItems = {
    links: [
        {
            label: 'Home',
            href: '/',
            icon: Home
        },
        {
            label: 'Playground',
            href: '/playground',
            icon: Armchair
        }
    ]
}

function Sidebar() {
    return (
        <Sheet>
            <SheetTrigger asChild>
                <Button icon={Menu} variant='ghost' className='fixed top-3 left-3'>
                </Button>
            </SheetTrigger>
            <SheetContent side='left'>
                <SheetHeader>
                    <SheetTitle>
                        Sidebar
                    </SheetTitle>
                    <SheetDescription className='flex flex-col items-start gap-2'>
                        {sidebarItems.links.map((link, id) => (
                            <Button href={link.href} key={id} icon={link.icon} content="lalalalalalaala"></Button>
                        ))}
                    </SheetDescription>
                </SheetHeader>
            </SheetContent>
        </Sheet>
    );
}


export default Sidebar;