// frontend/src/components/PassphraseInput.tsx
import React, { useState } from 'react';
import { TextField, Button, Box } from '@mui/material';

interface PassphraseInputProps {
  onSubmit: (passphrase: string) => void;
  isLoading: boolean;
  error: string | null;
}

const PassphraseInput: React.FC<PassphraseInputProps> = ({ onSubmit, isLoading, error }) => {
  const [passphrase, setPassphrase] = useState('');

  const handleSubmit = (event: React.FormEvent) => {
    event.preventDefault();
    onSubmit(passphrase);
  };

  return (
    <Box component="form" onSubmit={handleSubmit} sx={{ mt: 1, display: 'flex', flexDirection: 'column' }}>
      <TextField
        margin="normal"
        required
        fullWidth
        name="passphrase"
        label="Passphrase"
        type="password"
        id="passphrase"
        autoComplete="current-password"
        value={passphrase}
        onChange={(e) => setPassphrase(e.target.value)}
        error={!!error}
        helperText={error}
      />
      <Button
        type="submit"
        variant="contained"
        sx={{ mt: 3, mb: 2, textTransform: 'none', alignSelf: 'flex-start' }}
        disabled={isLoading}
      >
        {isLoading ? 'Submitting...' : 'Enter'}
      </Button>
    </Box>
  );
};

export default PassphraseInput;
