import React, { useState } from 'react';
import { Button, TextField } from '../index';
import { FaLocationArrow } from 'react-icons/fa';
import styles from './LocationInput.module.css';

export interface LocationInputProps {
  value: string;
  onChange: (value: string) => void;
  onUseCurrentLocation: () => void;
  isGettingLocation?: boolean;
  placeholder?: string;
  label?: string;
  error?: string;
  helperText?: string;
  disabled?: boolean;
}

const LocationInput: React.FC<LocationInputProps> = ({
  value,
  onChange,
  onUseCurrentLocation,
  isGettingLocation = false,
  placeholder = 'Kanton, Gemeinde, Adresse oder Parzelle',
  label = 'Standort',
  error,
  helperText,
  disabled = false
}) => {
  const [isRequestingLocation, setIsRequestingLocation] = useState(false);

  const handleUseCurrentLocation = async () => {
    setIsRequestingLocation(true);
    try {
      await onUseCurrentLocation();
    } finally {
      setIsRequestingLocation(false);
    }
  };

  return (
    <div className={styles.locationInputContainer}>
      <div className={styles.inputRow}>
        <div className={styles.inputWrapper}>
          <TextField
            value={value}
            onChange={onChange}
            placeholder={placeholder}
            label={label}
            error={error}
            helperText={helperText}
            disabled={disabled}
            size="md"
            type="text"
          />
        </div>
        <Button
          variant="secondary"
          size="md"
          icon={FaLocationArrow}
          onClick={handleUseCurrentLocation}
          disabled={disabled || isGettingLocation || isRequestingLocation}
          loading={isGettingLocation || isRequestingLocation}
          className={styles.locationButton}
        >
          Meine Position verwenden
        </Button>
      </div>
    </div>
  );
};

export default LocationInput;

