import { ArrowDown, ArrowUp } from "lucide-react";

import { cn } from "@/lib/utils";
import { SortDirection } from "@/models/SortDirection";

import { Button } from "./Shadcn";

type Props = {
	label: string;
	direction: SortDirection | undefined;
	onClick: () => void;
};

export function SortButton({ label, direction, onClick }: Props) {
	const active = direction !== undefined;

	return (
		<Button
			variant="ghost"
			className={cn(
				active ? "bg-blue-500 text-white" : "",
				"flex items-center gap-2",
			)}
			onClick={onClick}
		>
			<span>{label}</span>

			{active &&
				(direction === "asc" ? (
					<ArrowDown />
				) : direction === "desc" ? (
					<ArrowUp />
				) : null)}
		</Button>
	);
}
