import React from "react";

interface readBox {
  src: string;
  title: string;
  text: string;
}

export default function ReadBox(props: readBox) {
  return (
    <div className="max-Wide-mobile-2xl:min-w-[230px] max-Wide-mobile-2xl:h-[340px] cursor-pointer h-auto pb-2.5 w-full max-w-[372px] max-Wide-mobile-4xl:min-w-[270px] border border-neutral-300 dark:border-neutral-500 rounded-xl overflow-hidden shadow-md transition-transform duration-300 hover:scale-[1.03] hover:shadow-xl bg-white dark:bg-neutral-800">
      {/* تصویر */}
      <img
        src={props.src}
        alt="blog image"
        className="h-[250px] max-Wide-mobile-2xl:h-[180px] w-full object-cover border-b border-neutral-300 dark:border-neutral-600 rounded-t-xl"
      />

      {/* متن */}
      <div className="w-full  px-4 mt-3 font-bold">
        <p className="line-clamp-1 dark:text-neutral-200 mb-2 text-neutral-900  text-[16px]">
          {props.title}
        </p>
        <p className="line-clamp-5 font-medium text-neutral-500 dark:text-neutral-400 text-[13px]">
          {props.text}
        </p>
      </div>
    </div>
  );
}
