import React from 'react';
import { FloatingSelectionCard } from './FloatingSelectionCard';
import { SlidingSelection, SelectionItem } from './SlidingSelection';

interface FloatingSelectionModalProps {
  visible: boolean;
  onClose: () => void;
  title: string;
  items: SelectionItem[];
  selectedValue?: string | number;
  onValueChange: (value: string | number, index: number) => void;
  onConfirm?: (value: string | number, index: number) => void;
  showConfirmButton?: boolean;
  confirmButtonText?: string;
  pickerHeight?: number;
}

export function FloatingSelectionModal({
  visible,
  onClose,
  title,
  items,
  selectedValue,
  onValueChange,
  onConfirm,
  showConfirmButton = true,
  confirmButtonText = '确认',
  pickerHeight = 150,
}: FloatingSelectionModalProps) {
  const handleConfirm = (value: string | number, index: number) => {
    if (onConfirm) {
      onConfirm(value, index);
    }
    onClose();
  };

  return (
    <FloatingSelectionCard
      visible={visible}
      onClose={onClose}
      title={title}
    >
      <SlidingSelection
        items={items}
        selectedValue={selectedValue}
        onValueChange={onValueChange}
        onConfirm={handleConfirm}
        showConfirmButton={showConfirmButton}
        confirmButtonText={confirmButtonText}
        height={pickerHeight}
      />
    </FloatingSelectionCard>
  );
}

// Export types for convenience
export type { SelectionItem } from './SlidingSelection';