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="tenext-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-tenext-card-border"
              : ""
          }`}
        >
          <h5
            className={`icon-box-title mb-[15px] ${isLight ? "text-tenext-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-tenext-text-muted">
              {description}
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}
