'use client'

import { ChevronLeft, ChevronRight } from 'lucide-react'
import { ReactNode } from 'react'

import { Button } from '@/components/ui/button'

interface SidebarLayoutProps {
  isCollapsed: boolean
  onToggle: () => void
  children: ReactNode
}

export function SidebarLayout({ isCollapsed, onToggle, children }: SidebarLayoutProps) {
  return (
    <div className="relative">
      {/* Основной сайдбар */}
      <div
        className={`fixed left-4 top-4 bottom-4 ${
          isCollapsed ? 'w-16' : 'w-56'
        } bg-white/10 backdrop-blur-xl border border-white/20 rounded-2xl ${
          isCollapsed ? 'p-2' : 'p-3'
        } transition-all duration-300 ease-in-out z-50`}
      >
        {/* Кнопка сворачивания */}
        <div className="absolute -right-6 top-1/2 -translate-y-1/2 z-[999]">
          <div className="relative group">
            <Button
              variant="ghost"
              size="icon"
              onClick={onToggle}
              className="relative h-12 w-12 rounded-full bg-gradient-to-br from-white/20 to-white/5 border border-white/30 hover:from-white/30 hover:to-white/10 transition-all duration-300 ease-out hover:scale-110 active:scale-95 backdrop-blur-xl shadow-lg hover:shadow-xl hover:shadow-purple-500/20 group-hover:border-purple-300/50"
            >
              <div className="transition-transform duration-300 ease-out group-hover:scale-110">
                {isCollapsed ? (
                  <ChevronRight className="h-6 w-6 text-white/80 group-hover:text-white transition-colors duration-300" />
                ) : (
                  <ChevronLeft className="h-6 w-6 text-white/80 group-hover:text-white transition-colors duration-300" />
                )}
              </div>
              <div className="absolute inset-0 rounded-full bg-gradient-to-r from-purple-500/0 to-blue-500/0 group-hover:from-purple-500/10 group-hover:to-blue-500/10 transition-all duration-500"></div>
            </Button>
          </div>
        </div>

        {/* Контент сайдбара */}
        <div className="flex flex-col h-full">
          {children}
        </div>
      </div>
    </div>
  )
}