import { SliderProps } from '@/src/types/builder';
import { SliderOpener } from './SliderOpener';
import { X } from 'lucide-react';

export function Slider({ isOpen, onToggle, side, title, handleClose, children }: SliderProps) {
  const isLeftSide = side === 'left';

  return (
    <div className={`fixed ${side}-0 top-0 h-full flex items-start pt-14 z-[400]`}>
      <SliderOpener isOpen={isOpen} onToggle={onToggle} side={side} />

      <div
        className={`
          h-full bg-neutral-800 text-white shadow-xl flex flex-col
          ${isLeftSide ? 'border-r-[1px]' : 'border-l-[1px]'}
          transform transition-all duration-300 ease-in-out 
          ${isOpen ? 'translate-x-0 w-[350px] visible' : ''}
          ${!isOpen && isLeftSide ? '-translate-x-full w-0 invisible' : ''}
          ${!isOpen && !isLeftSide ? 'translate-x-full w-0 invisible' : ''}
        `}
      >
        <div className='border-b border-neutral-700 flex justify-between items-center p-4'>
          <h3 className='text-lg font-semibold'>{title}</h3>
          <button
            onClick={handleClose}
            className='text-neutral-400 hover:text-white transition-colors'
            aria-label='Close panel'
          >
            <X size={20} />
          </button>
        </div>
        <div className='overflow-y-auto flex-1'>{children}</div>
      </div>
    </div>
  );
}
