'use client';

import { useState } from 'react';
import type { SidebarProps } from '@/types/component-props';
import Link from 'next/link';

export default function Sidebar({ activePath, onNavigate }: SidebarProps) {
  const [isCollapsed, setIsCollapsed] = useState(false);

  const navItems = [
    { path: '/dashboard', label: 'Dashboard', icon: '📊' },
    { path: '/recordings', label: 'Recordings', icon: '🎙️' },
    { path: '/apps', label: 'Generated Apps', icon: '🚀' },
  ];

  const handleNavClick = (path: string) => {
    onNavigate?.(path);
  };

  return (
    <aside
      className={`bg-gray-50 border-r transition-all duration-300 ${
        isCollapsed ? 'w-16' : 'w-64'
      }`}
    >
      <div className="p-4">
        <button
          onClick={() => setIsCollapsed(!isCollapsed)}
          className="w-full text-left text-sm text-gray-600 hover:text-gray-900 mb-6"
        >
          {isCollapsed ? '→' : '←'}
        </button>

        <nav className="space-y-2">
          {navItems.map((item) => (
            <Link
              key={item.path}
              href={item.path}
              onClick={() => handleNavClick(item.path)}
              className={`flex items-center gap-3 px-3 py-2 rounded-md transition-colors ${
                activePath === item.path
                  ? 'bg-blue-100 text-blue-700'
                  : 'text-gray-700 hover:bg-gray-100'
              }`}
            >
              <span className="text-lg">{item.icon}</span>
              {!isCollapsed && <span className="text-sm font-medium">{item.label}</span>}
            </Link>
          ))}
        </nav>
      </div>
    </aside>
  );
}