import {ChekinHostSDK} from '@chekinapp/host-sdk';

const sdk = new ChekinHostSDK({
  apiKey: 'your-api-key',
  housingId: 'reservation-123',
});

sdk.render('chekin-container').then(() => {
  console.log('SDK loaded successfully');
});

import {ChekinHostSDKView} from '@chekinapp/host-sdk-react';

function MyComponent() {
  return (
    <ChekinHostSDKView
      apiKey="your-api-key"
      features={['IV', 'LIVENESS_DETECTION']}
      onHeightChanged={height => console.log(height)}
    />
  );
}

import {useHostSDKEventListener, ChekinHostSDKView} from '@chekinapp/host-sdk-react';

function MyComponent() {
  useHostSDKEventListener({
    onHeightChanged: height => console.log('Height:', height),
    onError: error => console.error('SDK Error:', error),
  });

  return <ChekinHostSDKView apiKey="your-api-key" features={['IV']} />;
}

{
  apiKey: 'your-api-key',          // Required: Your Chekin API key
  features: ['IV'],                // Optional: Enabled features
  mode: 'ALL',                // Optional: Enabled features
  housingId: 'housing-123',        // Optional: Pre-select housing
  defaultLanguage: 'en'            // Optional: Default language
}

{
  version: '1.6.2',                // Pin to specific version of the SDK (default: latest)
  baseUrl: 'https://custom.com/',  // Custom hosting URL of the iframe app
  styles: 'body { font-family: Arial, sans-serif; } .primary-color { color: #007cba; }',  // Custom CSS styles as string
  stylesLink: 'https://yoursite.com/custom.css',  // External stylesheet
  autoHeight: true,                // Auto-adjust iframe height
  enableLogging: false,            // Disable SDK logging (default). It is needed for debugging.
  hiddenSections: ['housing_police'],    // Hide specific sections
  hiddenFormFields: {              // Hide specific form fields
    housingInfo: ['field1', 'field2']
  },
  onHeightChanged: height => {
    console.log('Height changed:', height);
  },
  onError: error => {
    console.error('SDK Error:', error.message);
  },
  onConnectionError: error => {
    console.error('Connection Error:', error);
  },
  onPoliceAccountConnection: data => {
    console.log('Police account connected:', data);
  },
  onStatAccountConnection: data => {
    console.log('Stat account connected:', data);
  }
}

sdk.on('height-changed', height => {
  console.log(`SDK height: ${height}px`);
});

sdk.on('error', error => {
  console.error('SDK Error:', error.message);
});

sdk.on('ready', () => {
  console.log('SDK is ready');
});

import { useRef } from 'react';
import { ChekinHostSDKView } from '@chekinapp/host-sdk-react';
import type { ChekinHostSDKViewHandle } from '@chekinapp/host-sdk-react';

function MyComponent() {
  const sdkRef = useRef<ChekinHostSDKViewHandle>(null);

  return (
    <ChekinHostSDKView
      ref={sdkRef}
      apiKey="your-api-key"
      features={['IV', 'LIVENESS_DETECTION']}
      autoHeight={true}
      onHeightChanged={(height) => console.log(height)}
      onError={(error) => console.error(error)}
      className="my-sdk-container"
      style={{ minHeight: '400px' }}
    />
  );
}

import {useHostSDKEventListener} from '@chekinapp/host-sdk-react';

function MyComponent() {
  useHostSDKEventListener({
    onHeightChanged: height => {
      console.log('Height changed:', height);
    },
    onError: error => {
      console.error('SDK Error:', error.message);
    },
    onConnectionError: error => {
      console.error('Connection Error:', error);
    },
    onPoliceAccountConnection: data => {
      console.log('Police account connected:', data);
    },
    onStatAccountConnection: data => {
      console.log('Stat account connected:', data);
    },
  });

  return <ChekinHostSDKView apiKey="your-api-key" />;
}