import { useTranslation } from 'react-i18next';
import { Modal } from '@/components/ui/Modal';

interface ImportDialogProps {
  open: boolean;
  systemCount: number;
  userCount: number;
  onSelect: (target: 'system' | 'user' | 'both') => void;
  onCancel: () => void;
}

export function ImportDialog({ open, systemCount, userCount, onSelect, onCancel }: ImportDialogProps) {
  const { t } = useTranslation();

  return (
    <Modal open={open} onClose={onCancel}>
      <h2 className="text-lg font-semibold mb-4">{t('dialog.importTarget')}</h2>
      <p className="text-sm mb-4 opacity-70">
        {systemCount > 0 && t('dialog.importSystemCount', { count: systemCount })}
        {systemCount > 0 && userCount > 0 && ' | '}
        {userCount > 0 && t('dialog.importUserCount', { count: userCount })}
      </p>
      <div className="flex flex-col gap-2">
        {systemCount > 0 && <button className="px-4 py-2 text-sm rounded border text-left" style={{ borderColor: 'var(--app-border)' }} onClick={() => onSelect('system')}>{t('dialog.importSystem')}</button>}
        {userCount > 0 && <button className="px-4 py-2 text-sm rounded border text-left" style={{ borderColor: 'var(--app-border)' }} onClick={() => onSelect('user')}>{t('dialog.importUser')}</button>}
        {systemCount > 0 && userCount > 0 && <button className="px-4 py-2 text-sm rounded border text-left" style={{ borderColor: 'var(--app-border)' }} onClick={() => onSelect('both')}>{t('dialog.importBoth')}</button>}
        <button className="px-4 py-2 text-sm rounded border mt-2" style={{ borderColor: 'var(--app-border)' }} onClick={onCancel}>{t('dialog.cancel')}</button>
      </div>
    </Modal>
  );
}
