"use client";

import { forwardRef } from "react";
import { cx } from "../../../utils/cx";
import { ListItemProps } from "./types";

export const ListItem = forwardRef<HTMLLIElement, ListItemProps>(
  (
    { children, className = "", variant = "unstyled", style, ...props },
    ref
  ) => {
    // Get Tailwind classes for different variants
    const getVariantClasses = () => {
      if (variant === "unstyled") return "";

      // TODO: Add styles based on the figma design for all variants
      return "mb-1 leading-6";
    };

    const tailwindClasses = getVariantClasses();
    const combinedClassName = cx(
      tailwindClasses,
      "list-item",
      `list-item--${variant}`,
      className
    );

    return (
      <li ref={ref} className={combinedClassName} style={style} {...props}>
        {children}
      </li>
    );
  }
);

ListItem.displayName = "ListItem";

export type { ListItemProps };