"use client";

import Link from 'next/link';
import { ArrowLeft, FileText, Sparkles } from 'lucide-react';
import { Button } from '@/components/ui/button';

interface AppHeaderProps {
  showBackButton?: boolean;
  backHref?: string;
  showDetailsButton?: boolean;
  onDetailsClick?: () => void;
  title?: string;
  showLogo?: boolean;
}

export function AppHeader({
  showBackButton = false,
  backHref = '/',
  showDetailsButton = false,
  onDetailsClick,
  title,
  showLogo = false, // Default to false
}: AppHeaderProps) {
  return (
    <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
      <div className="container flex h-16 items-center">
        {/* Left content (Back button) */}
        <div className="flex items-center">
          {showBackButton && (
            <Button variant="ghost" size="icon" asChild className="mr-2">
              <Link href={backHref} aria-label="Go back">
                <ArrowLeft className="h-5 w-5" />
              </Link>
            </Button>
          )}
        </div>

        {/* Middle content (Title or flex-1 placeholder for balance) */}
        {title ? (
          <h1 className="flex-1 truncate px-4 text-center font-headline text-lg font-semibold">{title}</h1>
        ) : (
          <div className="flex-1"></div> // Ensures right content is pushed to the right even without a title
        )}
        
        {/* Right content (Details Button, JourneyAI Logo) */}
        <div className="ml-auto flex items-center space-x-4">
          {showDetailsButton && onDetailsClick && (
            <Button variant="outline" onClick={onDetailsClick} aria-label="View Details">
              <FileText className="mr-2 h-4 w-4" />
              Details
            </Button>
          )}
          {showLogo && (
            <Link href="/" className="flex items-center space-x-2">
              <Sparkles className="h-6 w-6 text-primary" />
              <span className="font-headline text-xl font-bold">JourneyAI</span>
            </Link>
          )}
        </div>
      </div>
    </header>
  );
}