Unified Flipbox Laboratory

import { FlipboxProps } from "./types";
import { getThemeClassName } from "./utils";
import { useFlipbox } from "./useFlipbox";
import styles from "./Flipbox.module.css";

interface FlipboxBasicProps extends FlipboxProps {
  direction?: "horizontal" | "vertical";
  theme?: "blue" | "purple" | "orange" | "green" | "pink" | "dark";
}

export function FlipboxBasic({
  frontTitle = "Front Side",
  frontContent = "Hover to flip",
  frontIcon,
  backTitle = "Back Side",
  backContent = "This is the back side content",
  backButtonText,
  backButtonLink,
  height = 300,
  width = "100%",
  direction = "horizontal",
  theme = "purple",
  defaultFlipped = false,
  onFlip,
  ariaLabel,
}: FlipboxBasicProps) {
  const { isFlipped, containerProps } = useFlipbox({ defaultFlipped, onFlip });

  const containerClasses = [
    styles.flipboxContainer,
    direction === "vertical" ? styles.flipboxContainerVertical : undefined,
    styles[getThemeClassName(theme)],
    isFlipped ? styles.flipped : undefined,
  ]
    .filter(Boolean)
    .join(" ");

  const backClasses = [
    styles.flipboxBack,
    direction === "vertical" ? styles.flipboxBackVertical : undefined,
  ]
    .filter(Boolean)
    .join(" ");

  return (
    <div
      className={containerClasses}
      style={{ height, width }}
      {...containerProps}
      aria-label={ariaLabel || `Flipcard: ${frontTitle}`}
    >
      <div className={styles.flipboxInner}>
        <div className={styles.flipboxFront}>
          {frontIcon && <div className={styles.flipboxIcon}>{frontIcon}</div>}
          <div className={styles.flipboxTitle}>{frontTitle}</div>
          <div className={styles.flipboxContent}>{frontContent}</div>
        </div>
        <div className={backClasses}>
          <div className={styles.flipboxTitle}>{backTitle}</div>
          <div className={styles.flipboxContent}>{backContent}</div>
          {backButtonText && (
            <a href={backButtonLink || "#"} className={styles.flipboxButton}>
              {backButtonText}
            </a>
          )}
        </div>
      </div>
    </div>
  );
}