import React, { useState } from 'react';
import { Sidebar, RouteConfig } from '../layout/sidebar';
import { Home, Settings, User } from 'lucide-react';
import { BrowserRouter, useNavigate, useLocation } from 'react-router-dom';

// Wrapper wrapper to provide router context
export function SidebarLogoExample() {
  return (
    <BrowserRouter>
      <SidebarLogoContent />
    </BrowserRouter>
  );
}

function SidebarLogoContent() {
  const [expanded, setExpanded] = useState(true);
  const navigate = useNavigate();
  const location = useLocation();

  const routes: RouteConfig[] = [
    { path: '/home', label: 'Home', icon: Home },
    { path: '/profile', label: 'Profile', icon: User },
    { path: '/settings', label: 'Settings', icon: Settings },
  ];

  const CustomLogo = (
    <div className="flex items-center gap-2 font-bold text-xl text-primary">
      <div className="w-8 h-8 bg-primary rounded-full flex items-center justify-center text-primary-foreground">
        C
      </div>
      <span>CustomBrand</span>
    </div>
  );

  const CustomLogoCollapsed = (
    <div className="w-8 h-8 bg-primary rounded-full flex items-center justify-center text-primary-foreground font-bold">
      C
    </div>
  );

  return (
    <div className="flex h-[500px] border rounded-lg overflow-hidden bg-background">
      <Sidebar
        expanded={expanded}
        onToggle={() => setExpanded(!expanded)}
        user={{ email: 'test@example.com' }}
        onLogout={() => console.log('Logout')}
        location={location}
        navigate={navigate}
        routes={routes}
        logo={CustomLogo}
        logoCollapsed={CustomLogoCollapsed}
      />
      <div className={`flex-1 p-8 transition-all duration-300 ${expanded ? 'ml-64' : 'ml-20'}`}>
        <h1 className="text-2xl font-bold mb-4">Sidebar with Custom Logo</h1>
        <p>This example demonstrates passing a custom logo component to the Sidebar.</p>
        <div className="mt-8 p-4 border rounded bg-muted/20">
          <p className="text-sm text-muted-foreground">
            Try toggling the sidebar to see the collapsed logo version.
          </p>
        </div>
      </div>
    </div>
  );
}