import { motion, type HTMLMotionProps } from "motion/react";
import clsx, { type ClassValue } from "clsx";

import classes from "./BlueSectionSurface.module.css";

type Props = Omit<HTMLMotionProps<"div">, "className"> & {
  className?: ClassValue;
};

export default function BlueSectionSurface(props: Props) {
  return (
    <motion.div
      initial={{ scale: 0 }}
      animate={{ scale: 1 }}
      transition={{ duration: 0.2, type: "spring" }}
      {...props}
      className={clsx(classes.blueSectionSurface, props.className)}
    />
  );
}

export function BlueSurface(props: Props) {
  return <motion.div {...props} className={clsx(classes.blueSurface, props.className)} />;
}

export function BlueSurfaceContent(props: Props) {
  return <motion.div {...props} className={clsx(classes.blueSurfaceContent, props.className)} />;
}
