"use client";

import { ArrowUpIcon, ArrowDownIcon } from "@heroicons/react/24/outline";
import { Button } from "@/components/ui/button";

interface SortButtonProps {
  sortDateAsc: boolean;
  onSortToggle: () => void;
  className?: string;
}

export default function SortButton({ sortDateAsc, onSortToggle, className }: SortButtonProps) {
  return (
    <Button
      variant="outline"
      onClick={onSortToggle}
      className={`flex items-center gap-2${className ? ` ${className}` : ""}`}
    >
      {sortDateAsc ? (
        <>
          <ArrowUpIcon className="h-4 w-4" />
          Oldest First
        </>
      ) : (
        <>
          <ArrowDownIcon className="h-4 w-4" />
          Newest First
        </>
      )}
    </Button>
  );
}