import { ReactNode } from "react";

interface IconBoxProps {
  icon: ReactNode;
  title: string;
  description: string;
  hasBorder?: boolean;
}

export function IconBox({ icon, title, description, hasBorder = true }: IconBoxProps) {
  return (
    <div className="flex flex-col items-start gap-[20px] sm:flex-row sm:gap-[40px]">
      <div className="flex h-[88px] w-[88px] shrink-0 items-center justify-center">
        {icon}
      </div>
      
      <div
        className={`flex-1 pb-[30px] pt-[5px] ${
          hasBorder ? "border-b border-[#3F3F3F]" : ""
        }`}
      >
        <h5
          className="mb-[15px] text-white"
          style={{
            fontFamily: "var(--font-manrope)",
            fontSize: "25px",
            lineHeight: 1.4,
            fontWeight: 500,
          }}
        >
          {title}
        </h5>
        <p className="text-[16px] leading-[1.6] text-[#87899B]">
          {description}
        </p>
      </div>
    </div>
  );
}