import { ChevronLeft, type LucideIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

/**
 * Dashboard header component for dashboard pages
 *
 * @example
 * ```tsx
 * <DashboardHeader
 *   title="Blog Posts"
 *   description="Manage and publish your blog content"
 *   action={<Button>Create Post</Button>}
 *   backHref="/dashboard"
 * />
 * ```
 */

export interface DashboardHeaderProps {
	/**
	 * Page title
	 */
	title: string;
	/**
	 * Optional page description
	 */
	description?: string;
	/**
	 * Optional action element (usually a button)
	 */
	action?: React.ReactNode;
	/**
	 * Optional secondary actions
	 */
	secondaryActions?: React.ReactNode;
	/**
	 * Optional back link URL
	 */
	backHref?: string;
	/**
	 * Optional back link text
	 */
	backText?: string;
	/**
	 * Optional back link click handler
	 */
	onBackClick?: () => void;
	/**
	 * Optional icon to display
	 */
	icon?: LucideIcon;
	/**
	 * Additional CSS classes
	 */
	className?: string;
}

export function DashboardHeader({
	title,
	description,
	action,
	secondaryActions,
	backHref,
	backText = "Back",
	onBackClick,
	icon: Icon,
	className,
}: DashboardHeaderProps) {
	return (
		<div className={cn("pb-4 mb-6 border-b", className)}>
			{/* Back Link */}
			{(backHref || onBackClick) && (
				<Button
					variant="ghost"
					size="sm"
					className="mb-2 px-0 text-muted-foreground hover:text-foreground hover:bg-transparent"
					asChild={!!backHref && !onBackClick}
					onClick={onBackClick}
				>
					{backHref && !onBackClick ? (
						<a href={backHref} className="flex items-center gap-1">
							<ChevronLeft className="h-4 w-4" />
							<span>{backText}</span>
						</a>
					) : (
						<div className="flex items-center gap-1">
							<ChevronLeft className="h-4 w-4" />
							<span>{backText}</span>
						</div>
					)}
				</Button>
			)}

			{/* Header Content */}
			<div className="flex items-start justify-between flex-wrap gap-4">
				<div className="flex items-center gap-3">
					{/* Optional Icon */}
					{Icon && (
						<div className="p-2 bg-muted rounded-md">
							<Icon className="h-5 w-5 text-muted-foreground" />
						</div>
					)}

					{/* Title and Description */}
					<div>
						<h1 className="text-2xl font-bold">{title}</h1>
						{description && (
							<p className="text-muted-foreground mt-1">{description}</p>
						)}
					</div>
				</div>

				{/* Actions */}
				<div className="flex items-center gap-2 mt-1">
					{secondaryActions}
					{action}
				</div>
			</div>
		</div>
	);
}
