import styles from './PlaceholderForm.module.scss';
import type { FormBaseProps } from '../types.js';

const PlaceholderFormIsland = ({ variant }: FormBaseProps) => {
  return (
    <div data-form-variant={variant} className={styles.placeholderForm}>
      <form>
        <div className={styles.field}>
          <label className={styles.label}>First name</label>
          <div>
            <input className={styles.input} type="text" disabled />
          </div>
        </div>
        <div className={styles.field}>
          <label className={styles.label}>Last name</label>
          <div>
            <input className={styles.input} type="text" disabled />
          </div>
        </div>
        <div className={styles.field}>
          <label className={styles.label}>Email</label>
          <div>
            <input className={styles.input} type="text" disabled />
          </div>
        </div>
        <button type="button" disabled className={styles.submitButton}>
          Get free widget
        </button>
      </form>
    </div>
  );
};

export default PlaceholderFormIsland;
