import { ReactNode } from "react";

interface IconBoxProps {
  icon?: ReactNode;
  title: string;
  description: string;
  hasBorder?: boolean;
  theme?: "dark" | "light";
}

export function IconBox({ icon, title, description, hasBorder = true, theme = "dark" }: IconBoxProps) {
  const isLight = theme === "light";
  
  return (
    <div className="aiero-icon-box-widget w-full">
      <div className="icon-box-item flex flex-col items-start gap-[20px] sm:flex-row sm:gap-[40px]">
        {icon && (
          <div className="icon-container background-type-none flex h-[88px] w-[88px] shrink-0 items-center justify-center">
            <span className="icon block h-full w-full">
              {icon}
            </span>
          </div>
        )}
        
        <div
          className={`content-container flex-1 pb-[30px] pt-[5px] ${
            hasBorder 
              ? isLight 
                ? "border-b border-gray-200" 
                : "border-b border-aiero-card-border" 
              : ""
          }`}
        >
          <h5
            className={`icon-box-title mb-[15px] ${isLight ? "text-aiero-dark" : "text-white"}`}
            style={{
              fontFamily: "var(--font-manrope)",
              fontSize: "25px",
              lineHeight: 1.4,
              fontWeight: 500,
            }}
          >
            {title}
          </h5>
          <div className="icon-box-info">
            <p className="text-[16px] leading-[1.6] text-aiero-text-muted">
              {description}
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}