import {useState} from "react";
import SortingIcon from "../../../assets/images/sorting.svg";

type SortingProps = {
	isLoading: boolean;

	currentOrder: string;
	setOrder: (s: string) => void;
};

const Sorting = ({ setOrder, currentOrder, isLoading }: SortingProps) => {
	const [text, setText] = useState("ΠΡΩΤΑ, ΤΟ ΝΕΟΤΕΡΟ");
	const [reversestate, setReverseState] = useState("noreverse");
	const handleClick = async (e: React.MouseEvent) => {
		if (currentOrder === "asc" && isLoading === false) {
			
			setOrder("desc");
			setText("ΠΡΩΤΑ, ΤΟ ΠΑΛΑΙΟΤΕΡΟ");
			setReverseState("reverse");
		} else if (currentOrder === "desc" && isLoading === false) {
			
			setOrder("asc");
			setText("ΠΡΩΤΑ, ΤΟ ΝΕΟΤΕΡΟ");
			setReverseState("noreverse");
		}
	};
	return (
		<button className="sorting" onClick={handleClick}>
			<span>{text}</span>
			<span>
				<img
					className={reversestate}
					src={SortingIcon}
					alt="sorting icon"
				/>
			</span>
		</button>
	);
};
export default Sorting;