import {useIntersectionObserver} from '../hooks/useIntersectionObserver';
import styles from './Integrations.module.css';

const integrations = [
  'zsh',
  'bash',
  'fish',
  'tmux',
  'neovim',
  'starship',
  'polybar',
  'waybar',
  'sketchybar',
  'oh-my-posh',
];

const sdks = [
  {name: 'Rust', href: '/docs/ecosystem/rust-sdk'},
  {name: 'Python', href: '/docs/ecosystem/python-sdk'},
  {name: 'Node.js', href: '/docs/ecosystem/nodejs-sdk'},
  {name: 'Go', href: '/docs/ecosystem/go-sdk'},
  {name: 'Lua', href: '/docs/ecosystem/lua-sdk'},
  {name: 'Ruby', href: '/docs/ecosystem/ruby-sdk'},
  {name: 'C', href: '/docs/ecosystem/c-sdk'},
  {name: 'Shell', href: '/docs/ecosystem/shell'},
];

export default function Integrations(): JSX.Element {
  const [ref, isVisible] = useIntersectionObserver(0.1);

  return (
    <section className={styles.section}>
      <div
        className={`${styles.container} ${isVisible ? styles.visible : ''}`}
        ref={ref as React.RefObject<HTMLDivElement>}
      >
        <div className={styles.label}>Ecosystem</div>
        <h2 className={styles.heading}>Ecosystem</h2>
        <p className={styles.subheading}>beachcomber is infrastructure, not a prompt theme</p>

        <div className={styles.columns}>
          <div className={styles.column}>
            <div className={styles.columnHeading}>Integrations</div>
            <div className={styles.pills}>
              {integrations.map((name) => (
                <span key={name} className={styles.pill}>
                  {name}
                </span>
              ))}
            </div>
          </div>

          <div className={styles.divider} aria-hidden="true" />

          <div className={styles.column}>
            <div className={styles.columnHeading}>Client SDKs</div>
            <p className={styles.columnNote}>All stdlib-only. Published to their native registries.</p>
            <div className={styles.pills}>
              {sdks.map((sdk) => (
                <a key={sdk.name} href={sdk.href} className={`${styles.pill} ${styles.pillLink}`}>
                  {sdk.name}
                </a>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
