import React, { useState } from 'react';
import { Eye, EyeOff } from 'lucide-react';

export const Field: React.FC<React.InputHTMLAttributes<HTMLInputElement> & { label: string }> = ({
  label,
  ...props
}) => (
  <label className="block space-y-1.5">
    <span className="text-sm font-medium text-app-text">{label}</span>
    <input
      {...props}
      className="w-full rounded-md border border-app-border bg-app-surface px-3 py-2 text-sm text-app-text outline-none focus:border-brand focus:ring-2 focus:ring-brand/20"
    />
  </label>
);

export const PasswordField: React.FC<React.InputHTMLAttributes<HTMLInputElement> & { label: string }> = ({
  label,
  ...props
}) => {
  const [visible, setVisible] = useState(false);

  return (
    <label className="block space-y-1.5">
      <span className="text-sm font-medium text-app-text">{label}</span>
      <span className="relative block">
        <input
          {...props}
          type={visible ? 'text' : 'password'}
          className="w-full rounded-md border border-app-border bg-app-surface px-3 py-2 pr-10 text-sm text-app-text outline-none focus:border-brand focus:ring-2 focus:ring-brand/20"
        />
        <button
          type="button"
          onClick={() => setVisible(value => !value)}
          className="absolute right-2 top-1/2 -translate-y-1/2 rounded p-1 text-app-muted hover:text-app-text"
          aria-label={visible ? 'Hide password' : 'Show password'}
        >
          {visible ? <EyeOff size={16} /> : <Eye size={16} />}
        </button>
      </span>
    </label>
  );
};