'use client';

import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import { useTranslation } from '@/hooks/useTranslation';
import type { DataScopeType } from '@/services/api/iam-admin';

const ORDER: DataScopeType[] = ['SELF', 'DEPARTMENT', 'DEPARTMENT_TREE', 'ORGANIZATION', 'REGION', 'ALL'];

interface Props {
  value: DataScopeType | undefined;
  onChange: (v: DataScopeType) => void;
  disabled?: boolean;
}

export function ScopeTypeSelector({ value, onChange, disabled }: Props) {
  const { t } = useTranslation();
  const opts = t.iamAdmin.scopeType;

  return (
    <Select
      value={value}
      onValueChange={(v) => onChange(v as DataScopeType)}
      disabled={disabled}
    >
      <SelectTrigger>
        <SelectValue placeholder={t.iamAdmin.common.pickScopeType} />
      </SelectTrigger>
      <SelectContent>
        {ORDER.map((k) => (
          <SelectItem key={k} value={k}>
            <div className="flex flex-col">
              <span className="font-medium">{opts[k].label}</span>
              <span className="text-xs text-gray-500">{opts[k].hint}</span>
            </div>
          </SelectItem>
        ))}
      </SelectContent>
    </Select>
  );
}