import clsx from "clsx";
import dynamic from "next/dynamic";

import { SoundButton } from "@/components/call-to-action";
import Section, { type BaseSectionProps } from "@/components/section";
import { FLOWER_PETALS } from "@/config/data";
import { useStore } from "@/store";
import { Theme } from "@/types";

import styles from "./styles.module.scss";

const Flower = dynamic(
  () => import("@/components/flower").then((mod) => mod.default),
  { ssr: false },
);

type IntroProps = BaseSectionProps;

const Intro = (props: IntroProps) => {
  const audioAllowed = useStore.use.audioAllowed();

  return (
    <Section
      {...props}
      id="intro"
      className={styles.intro}
      theme={Theme.Light}
      variant="full"
    >
      <Flower items={FLOWER_PETALS} />
      <div
        className={clsx(styles.audioControls, {
          [styles.visible]: audioAllowed,
        })}
      >
        <SoundButton className={styles.button} />
      </div>
    </Section>
  );
};

export default Intro;