import ArrowDownwardOutlined from "@mui/icons-material/ArrowDownwardOutlined";
import ArrowUpwardOutlined from "@mui/icons-material/ArrowUpwardOutlined";
import SwapVertOutlined from "@mui/icons-material/SwapVertOutlined";

export function HostOrgSortHeader({ field, label, onToggle, sortBy, sortDirection }) {
    const active = sortBy === field;
    const SortIcon =
        active && sortDirection === "asc"
            ? ArrowUpwardOutlined
            : active && sortDirection === "desc"
              ? ArrowDownwardOutlined
              : SwapVertOutlined;
    const directionLabel = sortDirection === "asc" ? "升序" : "降序";
    const nextDirectionLabel = active && sortDirection === "desc" ? "升序" : "降序";

    return (
        <button
            aria-label={`按${label}${nextDirectionLabel}排序`}
            className={["admin-cell__head-trigger", active ? "admin-cell__head-trigger--active" : ""]
                .filter(Boolean)
                .join(" ")}
            type="button"
            onClick={() => onToggle(field)}
        >
            <SortIcon className="admin-cell__head-icon" fontSize="inherit" />
            <span className="admin-cell__head-label">
                {label}
                {active ? <span className="admin-cell__head-filter">({directionLabel})</span> : null}
            </span>
        </button>
    );
}
