"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
  keyProps?: string | number
  type: "horizontal" | "vertical"
  className?: string
}

const FrameHV = (props: Props) => {
  return (
    <div
      key={props?.keyProps}
      className={`h-[${props?.height_frame || "65px"}] rounded-[10px] bg-[var(--secondary-10)] flex ${
        props?.type === "vertical" ? "flex-col justify-center" : "justify-between"
      } items-center text-[var(--secondary-90)] pr-6 pl-4 ${props?.className || ""}`}>
      <p className="flex items-center text-base leading-[22px] font-bold">
        <span className="inline-block w-5 mr-2">
          <Image
            src={props?.src_icon}
            alt={props?.alt_icon}
            width={props?.width_icon || 24}
            height={props?.height_icon || 24}
            style={{
              width: "100%",
            }}
          />
        </span>
        <span>{props?.title}</span>
      </p>
      <p className={`${props?.type === "vertical" ? "text-[52px] leading-[65px]" : "text-2xl leading-[30px]"} font-medium text-[var(--primary--70)]`}>
        {props?.data}
      </p>
    </div>
  )
}

export default FrameHV