// import StarRating from "@/components/shared/StarRating";
// import { Interweave } from "interweave";

// const ReviewCard = ({ customer, authorName, reviewTitle, reviewDescription, rating }: any) => (
//   <div className="bg-white border border-gray-100 rounded p-6 flex flex-col gap-4 flex-shrink-0" style={{ minWidth: 280, flex: "1 0 280px" }}>
//     <StarRating count={rating} />
//     <h3 className="font-montserrat text-sm text-gray-600 leading-relaxed flex-1">{reviewTitle}</h3>
//     <p className="font-montserrat text-xs text-gray-600 leading-relaxed flex-1">{<Interweave content={reviewDescription} />}</p>
//     <div className="flex items-center gap-3 pt-2 border-t border-gray-100">
//       <img src={customer?.avatar} alt={authorName} className="w-10 h-10 rounded-full object-cover" />
//       <p className="font-montserrat text-sm font-semibold text-[#30232a]">{authorName}</p>
//     </div>
//   </div>
// );

// export default ReviewCard


// New

import StarRating from "@/components/shared/StarRating";
import { Interweave } from "interweave";

const ReviewCard = ({
  customer,
  authorName,
  reviewDescription,
  rating,
}: any) => {
  return (
    <div className="reviewbx flex flex-col bg-white p-6 h-full">

      {/* CONTENT */}
      <div className="flex-1 pb-3">
        <div className="ratingstar">
          <StarRating count={rating} />
        </div>

          <Interweave content={reviewDescription} />
      </div>

      {/* USER */}
      <div className="ratinguser flex items-center gap-3 pt-1">
        <div className="ratingavatar">
          <img
            src={customer?.avatar}
            alt={authorName}
            className="w-10 h-10 rounded-full object-cover"
          />
        </div>

        <div className="ratingcontent">
          <h3 className="font-semibold text-sm">
            {authorName}
          </h3>
        </div>
      </div>

    </div>
  );
};

export default ReviewCard;