import { Alert } from '@/components';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue
} from '@/components/ui/select';

interface MemberCredentials {
  accessType: string | null;
  username: string;
  credential: string;
  confirmCredential: string;
}

interface Props {
  form: MemberCredentials;
  error: string | null;
  onChange: (key: keyof MemberCredentials, value: string) => void;
  onSubmit: () => void;
}

const MemberCredentialsForm = ({ form, error, onChange, onSubmit }: Props) => {
  return (
    <div className="max-w-md mx-auto bg-white p-6 rounded-lg shadow-md">
      <h2 className="text-xl font-bold mb-4">Create Member Credentials</h2>

      {error && (
        <Alert variant="danger" className="mb-5">
          {error}
        </Alert>
      )}

      <div className="space-y-4">
        {/* Access Type */}
        <div>
          <label>
            <span className="text-red-500">*</span>Access Type
          </label>
          <Select onValueChange={(value) => onChange('accessType', value)}>
            <SelectTrigger>
              <SelectValue placeholder="Select Access Type" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="Pin Credentials">Pin Credentials</SelectItem>
              <SelectItem value="Secret Auth">Secret Auth</SelectItem>
              <SelectItem value="APIkey">APIkey</SelectItem>
              <SelectItem value="Web Credentials">Web Credentials</SelectItem>
              <SelectItem value="OTM Tpay">OTM Tpay</SelectItem>
            </SelectContent>
          </Select>
        </div>

        {/* Username */}
        <div>
          <label>
            <span className="text-red-500">*</span>Username
          </label>
          <Input value={form.username} onChange={(e) => onChange('username', e.target.value)} />
        </div>

        {/* Credentials */}
        <div>
          <label>
            <span className="text-red-500">*</span>Credentials
          </label>
          <Input
            type="password"
            value={form.credential}
            onChange={(e) => onChange('credential', e.target.value)}
          />
        </div>

        {/* Confirm Credentials */}
        <div>
          <label>
            <span className="text-red-500">*</span>Confirm Credentials
          </label>
          <Input
            type="password"
            value={form.confirmCredential}
            onChange={(e) => onChange('confirmCredential', e.target.value)}
          />
        </div>

        <Button className="w-full" onClick={onSubmit}>
          Create Account
        </Button>
      </div>
    </div>
  );
};

export default MemberCredentialsForm;