import { Heart, Info, Upload } from "lucide-react";
import { ThemeToggle } from "./ThemeToggle";
import { Button } from "@/components/ui/button";

interface NavigationProps {
  activeTab: "upload" | "about";
  setActiveTab: (tab: "upload" | "about") => void;
}

export const Navigation = ({ activeTab, setActiveTab }: NavigationProps) => {
  return (
    <header className="sticky top-0 z-50 w-full border-b border-border/50 bg-background/80 backdrop-blur-xl">
      <div className="container mx-auto flex h-16 items-center justify-between px-4">
        <div className="flex items-center gap-3">
          <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-primary/10">
            <Heart className="h-5 w-5 text-primary" />
          </div>
          <div>
            <h1 className="font-display text-lg font-bold tracking-tight">
              Cardexa
            </h1>
            <p className="text-xs text-muted-foreground">
              Cardiac Analysis Platform
            </p>
          </div>
        </div>

        <nav className="flex items-center gap-2">
          <Button
            variant={activeTab === "upload" ? "secondary" : "ghost"}
            onClick={() => setActiveTab("upload")}
            className="gap-2"
          >
            <Upload className="h-4 w-4" />
            <span className="hidden sm:inline">Analysis</span>
          </Button>
          <Button
            variant={activeTab === "about" ? "secondary" : "ghost"}
            onClick={() => setActiveTab("about")}
            className="gap-2"
          >
            <Info className="h-4 w-4" />
            <span className="hidden sm:inline">About</span>
          </Button>
          <div className="ml-2 h-6 w-px bg-border" />
          <ThemeToggle />
        </nav>
      </div>
    </header>
  );
};