"use client"

import Image from "next/image"

interface Props {
  src_icon: string
  alt_icon: string
  width_icon?: number
  height_icon?: number
  height_frame?: string
  title: string
  data: string
  desc: string
  bg_img?: string
  className?: string
  className_title?: string
}

const FrameBgImage = (props: Props) => {

  return (
    <div
      style={{
        backgroundImage: "url(" + `${props?.bg_img ? props?.bg_img : "/img/default_image.jpg"}` + ")",
      }}
      className={`h-[${props?.height_frame || "142px"}] bg-no-repeat bg-cover rounded-[10px] px-[17px] py-[15px] ${props?.className || ""}`}>
      <p className="flex items-center text-white text-base leading-[22px] font-bold mb-2">
        <span className="inline-block w-5 mr-2">
          <Image
            src={props?.src_icon || ""}
            alt={props?.alt_icon || "no icon"}
            width={props?.width_icon || 24}
            height={props?.height_icon || 24}
            style={{
              width: "100%",
            }}
          />
        </span>
        <span className={`${props?.className_title || ""}`}>{props?.title || ""}</span>
      </p>
      <p className="font-bold text-3xl leading-[37px] text-[var(--success-70)]">{props?.data || ""}</p>
      <p className="text-white text-base leading-[22px] font-normal">{props?.desc}</p>
    </div>
  )
}

export default FrameBgImage