import { ChevronLeft, ChevronRight } from 'lucide-react';
import { SliderOpenerProps } from '@/src/types/builder';

export function SliderOpener({ isOpen, onToggle, side }: SliderOpenerProps) {
  const isLeftSide = side === 'left';

  const positionClasses = (() => {
    if (isLeftSide) {
      return `left-0 ${isOpen ? 'translate-x-[350px]' : 'translate-x-0'}`;
    }
    return `right-0 ${isOpen ? '-translate-x-[350px]' : 'translate-x-0'}`;
  })();

  const chevronIcon = (() => {
    if (isLeftSide && isOpen) return <ChevronLeft size={20} />;
    if (isLeftSide && !isOpen) return <ChevronRight size={20} />;
    if (!isLeftSide && isOpen) return <ChevronRight size={20} />;
    return <ChevronLeft size={20} />;
  })();

  return (
    <button
      onClick={onToggle}
      className={`
        fixed top-1/2 -translate-y-1/2
        transition-all duration-300 ease-in-out
        ${positionClasses}
        border-[1px] border-neutral-300
        bg-neutral-800 text-white p-2 
        ${isLeftSide ? 'rounded-r-md' : 'rounded-l-md'}
        shadow-lg hover:bg-neutral-700 z-[200]
      `}
      aria-label={isOpen ? 'Close panel' : 'Open panel'}
    >
      {chevronIcon}
    </button>
  );
}
