import { cn } from "@/lib/utils";
import { NavLink } from "react-router-dom";
import { ProjectSelectBox } from "./ProjectSelectBox";
import { ThemeSelectBox } from "./ThemeSelectBox";
import { LanguageSelectBox } from "./LanguageSelectBox";
import { UserProfileBox } from "./UserProfileBox";
import { useSettingsStore } from "@/store/useSettingsStore";
import Logo from "@/assets/react.svg";

const menuItems = [
	{ name: "Feedback", path: "/feedbacks", type: "feedback" },
	{ name: "Issue", path: "/issues", type: "issue" },
];

interface HeaderProps {
	className?: string;
}

export function Header({ className }: HeaderProps) {
	const { projectId, channelId } = useSettingsStore();

	const getPath = (type: string, basePath: string) => {
		if (type === "issue") {
			return `/projects/${projectId}${basePath}`;
		}
		return `/projects/${projectId}/channels/${channelId}${basePath}`;
	};

	const homePath = `/projects/${projectId}`;

	return (
		<header className={cn("border-b", className)}>
			<div className="container mx-auto flex h-16 items-center">
				{/* Left Section */}
				<div className="flex items-center gap-6">
					<NavLink to={homePath} className="flex items-center gap-2">
						<img src={Logo} alt="Logo" className="h-8 w-auto" />
					</NavLink>
					<ProjectSelectBox />
				</div>

				{/* Middle Navigation */}
				<nav className="mx-8 flex items-center space-x-4 lg:space-x-6">
					{menuItems.map((item) => (
						<NavLink
							key={item.name}
							to={getPath(item.type, item.path)}
							className={({ isActive }) =>
								`text-base transition-colors hover:text-primary ${
									isActive
										? "font-bold text-primary"
										: "font-medium text-muted-foreground"
								}`
							}
						>
							{item.name}
						</NavLink>
					))}
				</nav>

				{/* Right Section */}
				<div className="ml-auto flex items-center gap-4">
					<ThemeSelectBox />
					<LanguageSelectBox />
					<UserProfileBox />
				</div>
			</div>
		</header>
	);
}