thrilltrack-explorer/src/components/moderation/QueueSortControls.tsx

import { ArrowUp, ArrowDown } from 'lucide-react';
import { Label } from '@/components/ui/label';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Button } from '@/components/ui/button';
import type { SortConfig, SortField } from '@/types/moderation';

interface QueueSortControlsProps {
  sortConfig: SortConfig;
  onSortChange: (config: SortConfig) => void;
  isMobile?: boolean;
  variant?: 'inline' | 'standalone';
  showLabel?: boolean;
}

const getSortFieldLabel = (field: SortField): string => {
  switch (field) {
    case 'created_at': return 'Date Created';
    case 'username': return 'Submitter';
    case 'submission_type': return 'Type';
    case 'status': return 'Status';
    case 'escalated': return 'Escalated';
    default: return field;
  }
};

export const QueueSortControls = ({ 
  sortConfig, 
  onSortChange,
  isMobile = false,
  variant = 'inline',
  showLabel = true
}: QueueSortControlsProps) => {
  const handleFieldChange = (field: SortField) => {
    onSortChange({ ...sortConfig, field });
  };

  const handleDirectionToggle = () => {
    onSortChange({ 
      ...sortConfig, 
      direction: sortConfig.direction === 'asc' ? 'desc' : 'asc' 
    });
  };

  return (
    <div className={`space-y-2 ${isMobile ? 'w-full' : 'min-w-[180px]'}`}>
      {showLabel && (
        <Label className={`font-medium ${isMobile ? 'text-xs' : 'text-sm'}`}>
          Sort By
        </Label>
      )}
      <div className="flex items-center gap-2 text-xs text-muted-foreground mb-1">
        <span>
          Sorting by {getSortFieldLabel(sortConfig.field)} ({sortConfig.direction === 'asc' ? '↑ Ascending' : '↓ Descending'})
        </span>
      </div>
      <div className="flex gap-2">
        <Select 
          value={sortConfig.field} 
          onValueChange={handleFieldChange}
        >
          <SelectTrigger className={isMobile ? "h-10 flex-1" : "flex-1"}>
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="created_at">{getSortFieldLabel('created_at')}</SelectItem>
            <SelectItem value="username">{getSortFieldLabel('username')}</SelectItem>
            <SelectItem value="submission_type">{getSortFieldLabel('submission_type')}</SelectItem>
            <SelectItem value="status">{getSortFieldLabel('status')}</SelectItem>
            <SelectItem value="escalated">{getSortFieldLabel('escalated')}</SelectItem>
          </SelectContent>
        </Select>
        
        <Button
          variant="outline"
          size={isMobile ? "default" : "sm"}
          onClick={handleDirectionToggle}
          className={isMobile ? "h-10" : ""}
          title={sortConfig.direction === 'asc' ? 'Sort Descending' : 'Sort Ascending'}
        >
          {sortConfig.direction === 'asc' ? (
            <ArrowUp className="w-4 h-4" />
          ) : (
            <ArrowDown className="w-4 h-4" />
          )}
        </Button>
      </div>
    </div>
  );
};