import React from 'react';
import { Button, ButtonProps } from "@/components/ui/button";
import { cn } from "@/utils";

interface NavButtonProps extends ButtonProps {
  isActive?: boolean;
  icon?: React.ElementType;
  label: string;
}

export const NavButton = React.forwardRef<HTMLButtonElement, NavButtonProps>(
  ({ className, isActive, icon: Icon, label, children, ...props }, ref) => (
    <Button
      ref={ref}
      variant="ghost"
      className={cn(
        "w-full justify-start gap-4 px-4 py-3 h-auto rounded-xl transition-all duration-200 group relative overflow-hidden",
        isActive 
          ? "bg-blue-50 dark:bg-blue-600/10 text-blue-600 dark:text-blue-400 border border-blue-200 dark:border-blue-600/20 hover:bg-blue-50 dark:hover:bg-blue-600/10" 
          : "text-muted-foreground hover:bg-accent hover:text-foreground border border-transparent",
        className
      )}
      {...props}
    >
      {isActive && (
        <div className="absolute left-0 top-0 bottom-0 w-1 bg-blue-600 dark:bg-blue-500 rounded-l-xl" />
      )}
      {Icon && <Icon size={20} className={cn("flex-shrink-0", isActive ? "text-blue-600 dark:text-blue-400" : "text-muted-foreground group-hover:text-foreground")} />}
      <div className="flex flex-col overflow-hidden whitespace-nowrap">
        <span className={cn("text-sm font-semibold tracking-wide", isActive ? "text-blue-600 dark:text-blue-400" : "")}>
          {label}
        </span>
        {children}
      </div>
    </Button>
  )
);
NavButton.displayName = "NavButton";
