import React from "react";
import { Check } from "lucide-react";

interface IconListProps {
  children: React.ReactNode;
  className?: string;
}

interface IconListItemProps {
  children: React.ReactNode;
  icon?: React.ReactNode;
  bullet?: boolean;
  check?: boolean;
  className?: string;
  iconClassName?: string;
  iconContainerClassName?: string;
}

export const IconList: React.FC<IconListProps> = ({
  children,
  className = "",
}) => <ul className={`space-y-4 ${className}`}>{children}</ul>;

export const IconListItem: React.FC<IconListItemProps> = ({
  children,
  icon,
  bullet,
  check,
  className = "",
  iconClassName = "",
  iconContainerClassName = "",
}) => {
  let renderIcon = icon;

  if (bullet) {
    renderIcon = (
      <div className="w-2 h-2 bg-slate-900 rounded-full shrink-0 group-hover:bg-blue-500 transition-colors duration-300" />
    );
  } else if (check) {
    renderIcon = (
      <div className="w-8 h-8 rounded-full bg-slate-900 flex items-center justify-center shrink-0 group-hover:scale-110 group-hover:shadow-lg group-hover:shadow-blue-500/10 transition-all duration-300">
        <Check className="w-4 h-4 text-white" />
      </div>
    );
  }

  return (
    <li className={`flex items-start gap-4 group ${className}`}>
      {renderIcon && (
        <div
          className={`shrink-0 flex items-center justify-center transition-transform duration-500 ${iconContainerClassName || "mt-1.5"} ${iconClassName}`}
        >
          {renderIcon}
        </div>
      )}
      <div className="flex-1">{children}</div>
    </li>
  );
};
