"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 | number
  bg_img?: String
  className?: string
  classNameReverse?: string
  className_title?: string
  classNameImage?: string
}

const FrameBgImageHorizontal = (props: Props) => {
  return (
    <div
      style={{
        backgroundImage: "url(" + `${props?.bg_img ? props?.bg_img : "/img/default_image.jpg"}` + ")",
      }}
      className={`${props?.height_frame || "h-[142px]"} flex justify-between items-center bg-no-repeat bg-cover rounded-[10px] relative ${
        props?.className || ""
      }`}>
      <div
        className={`flex flex-col items-start text-white text-base leading-[22px] font-bold pl-[17px] py-3 grow overflow-visible relative z-20 ${
          props?.classNameReverse || ""
        }`}>
        <p className={`text-2xl leading-[30px] font-bold ${props?.className_title || ""}`}>{props.title}</p>
        <p className="font-semibold text-[52px] leading-[65px] text-[var(--primary--40)]">{props.data}</p>
      </div>
      <div className={`w-full h-full ${props?.classNameImage}`}>
        <Image
          src={props?.src_icon || ""}
          alt={props?.alt_icon || "no icon"}
          width={props?.width_icon || 24}
          height={props?.height_icon || 24}
          style={{
            width: "100%",
            height: "100%",
          }}
        />
      </div>
    </div>
  )
}

export default FrameBgImageHorizontal