"use client";
import { PIG_NAMES } from "@/lib/common";
import styles from "./pig.module.scss";
import { ChillPig } from "./pigs/simple/ChillPig";
import { DancePig } from "./pigs/simple/DancePig";
import { DrinkPig } from "./pigs/simple/DrinkPig";
import { GuardPig } from "./pigs/simple/GuardPig";
import { KeyPig } from "./pigs/simple/KeyPig";
import { ListenPig } from "./pigs/simple/ListenPig";
import { LogoPig } from "./pigs/simple/LogoPig";
import { MusicPig } from "./pigs/simple/MusicPig";
import { PeekPig } from "./pigs/simple/PeekPig";
import { PointPig } from "./pigs/simple/PointPig";
import { StudentPig } from "./pigs/simple/StudentPig";
import { useInView } from "react-intersection-observer";

export const BgPig = ({
  type,
  color,
}: {
  type: string;
  color?: "neufPink" | "white" | "goldenBeige";
}) => {
  const { ref: observer, inView: IsInView } = useInView({ triggerOnce: false });

  if (!PIG_NAMES.includes(type)) {
    return <></>;
  }

  return (
    <div className={styles.bgPigWrapper}>
      <div
        className={`${styles.pig} ${styles.bgPig}`}
        style={{ "--color-pig": color } as React.CSSProperties}
        data-inview={IsInView}
      >
        {type === "logo" && <LogoPig />}
        {type === "music" && <MusicPig />}
        {type === "drink" && <DrinkPig />}
        {type === "dance" && <DancePig />}
        {type === "point" && <PointPig />}
        {type === "student" && <StudentPig />}
        {type === "listen" && <ListenPig />}
        {type === "guard" && <GuardPig />}
        {type === "key" && <KeyPig />}
        {type === "chill" && <ChillPig />}
        {type === "peek" && <PeekPig />}
      </div>
      <div className={styles.observer} ref={observer}></div>
    </div>
  );
};