import { useMemo } from 'react';

import { Balancer } from 'react-wrap-balancer';

import { Container } from '@/components/container';
import { count as soundCount } from '@/lib/sounds';

import styles from './hero.module.css';

export function Hero() {
  const count = useMemo(soundCount, []);

  return (
    <div className={styles.hero}>
      <Container>
        <img
          alt="Faded Moodist Logo"
          className={styles.logo}
          height={45}
          src="/logo.svg"
          width={45}
        />

        <div className={styles.title}>
          <div className={styles.left} />
          <h1>Moodist</h1>
          <div className={styles.right} />
        </div>

        <p className={styles.desc}>
          <Balancer>Ambient sounds for focus and calm.</Balancer>
        </p>

        <p className={styles.sounds}>{count} Sounds</p>
      </Container>
    </div>
  );
}