import { NavLink } from 'react-router'
import { NAVIGATION_ITEMS } from '@/config/navigation'
import { cn } from '@/lib/utils'
import { useTheme } from '@/components/theme-provider'
import { Sun, Moon, Laptop } from 'lucide-react'
import { Button } from '@/components/ui/button'

export const Sidebar = () => {
    const { theme, setTheme } = useTheme()

    return (
        <aside className="border-r bg-card w-64 flex-col hidden md:flex h-screen sticky top-0">
            <div className="p-6">
                <h1 className="text-2xl font-bold tracking-tight text-primary">
                    NordicFlow
                </h1>
            </div>
            <nav className="flex-1 px-4 space-y-2">
                {NAVIGATION_ITEMS.map((item) => (
                    <NavLink
                        key={item.path}
                        to={item.path}
                        className={({ isActive }) =>
                            cn(
                                'flex items-center gap-3 px-4 py-2 rounded-md text-sm font-medium transition-colors',
                                isActive
                                    ? 'bg-primary text-primary-foreground'
                                    : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'
                            )
                        }
                    >
                        <item.icon className="w-5 h-5" />
                        {item.label}
                    </NavLink>
                ))}
            </nav>
            <div className="p-4 border-t">
                <div className="flex items-center justify-between p-2 rounded-lg bg-muted/50 border">
                    <Button
                        variant="ghost"
                        size="icon"
                        className={cn("w-8 h-8 rounded-md", theme === 'light' && "bg-background shadow-sm")}
                        onClick={() => setTheme('light')}
                    >
                        <Sun className="w-4 h-4" />
                    </Button>
                    <Button
                        variant="ghost"
                        size="icon"
                        className={cn("w-8 h-8 rounded-md", theme === 'system' && "bg-background shadow-sm")}
                        onClick={() => setTheme('system')}
                    >
                        <Laptop className="w-4 h-4" />
                    </Button>
                    <Button
                        variant="ghost"
                        size="icon"
                        className={cn("w-8 h-8 rounded-md", theme === 'dark' && "bg-background shadow-sm")}
                        onClick={() => setTheme('dark')}
                    >
                        <Moon className="w-4 h-4" />
                    </Button>
                </div>
            </div>
        </aside>
    )
}
