import React from "react";
import clsx from "clsx";
import { m } from "framer-motion";

import DynamicComponent, {
  type ValidTags,
} from "@/components/dynamic-component";

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

interface ListProps {
  items?: React.ReactNode[];
  as?: ValidTags;
  scrollX?: boolean;
  children?: React.ReactNode;
  className?: string;
  style?: React.CSSProperties;
}

export default function List({
  items = [],
  as = "div",
  scrollX = false,
  children,
  className,
  ...props
}: ListProps) {
  if (!items || items.length === 0) return null;

  return (
    <DynamicComponent
      tag={as}
      className={clsx(styles.listWrapper, className, {
        [styles.scrollX]: scrollX,
      })}
      {...props}
    >
      {children}
      <m.ul className={styles.list}>
        {items.filter(Boolean).map((item, index) => (
          <m.li key={index} className={styles.item}>
            {item}
          </m.li>
        ))}
      </m.ul>
    </DynamicComponent>
  );
}