/**
 * SortHeader - 列表排序表头组件
 */

import { ArrowUp, ArrowDown } from 'lucide-react'
import { useTranslation } from 'react-i18next'
import type { SortField, SortOrder } from '../../../shared/types/sftp.types'

interface SortHeaderProps {
  onSort: (f: SortField) => void
  sortField: SortField
  sortOrder: SortOrder
}

const FIELDS: { key: SortField; className: string }[] = [
  { key: 'name', className: 'sftp-col-name flex-1 min-w-0 justify-start' },
  { key: 'modified', className: 'sftp-col-modified w-28 flex-shrink-0 justify-end' },
  { key: 'size', className: 'sftp-col-size w-16 flex-shrink-0 justify-end' },
  { key: 'type', className: 'sftp-col-type w-16 flex-shrink-0 justify-end' },
]

export function SortHeader({ onSort, sortField, sortOrder }: SortHeaderProps) {
  const { t } = useTranslation('sftp')

  return (
    <div className="h-8 flex items-center w-full text-xs text-txt-muted select-none">
      {FIELDS.map(({ key, className }) => {
        const active = sortField === key
        return (
          <button
            key={key}
            type="button"
            onClick={() => onSort(key)}
            className={`${className} flex items-center gap-1 hover:text-content-primary transition-colors ${
              active ? 'text-content-primary' : ''
            }`}
          >
            <span>{t(`sort.${key}`)}</span>
            {active &&
              (sortOrder === 'asc' ? (
                <ArrowUp className="w-3 h-3 flex-shrink-0" />
              ) : (
                <ArrowDown className="w-3 h-3 flex-shrink-0" />
              ))}
          </button>
        )
      })}
    </div>
  )
}