import Image from "next/image";
import { Button } from "./ui/button";
import RiyalIcon from "./RiyalIcon";
import { PropertyCard } from "@/types/property-card";

type SubEstateProps = {
  unit?: PropertyCard;
  onClick: () => void;
}

const SubEstateCard = ({ unit, onClick }: SubEstateProps) => {
  const image = unit?.image || "/no-image.png";
  const title = unit?.title || "B2";
  const type = unit?.propertyType || "تاون هاوس";
  const area = unit?.area || 250;
  const bedrooms = unit?.bedrooms || 2;
  const bathrooms = unit?.bathrooms || 1;
  const floors = unit?.floors || "الأول - الملحق";
  const description = unit?.subtitle || "3 غرف نوم ماستر - مجلس - صالة - صالة طعام - مطبخ - غرفة غسيل - 3 سطوح - باب كراج";
  const price = unit?.price || "18,500,000";

  return (
    <div className="flex gap-2 w-full">
      <div className="border border-[#CAD5E2] rounded-xl p-3 w-full">
        {/* صورة الوحدة */}
        <div className="relative w-full h-40 mb-3 rounded-lg overflow-hidden">
          <Image
            className="object-cover"
            src={image}
            fill
            alt={title}
          />
        </div>

        <div>
          <div className="mb-3 flex justify-between items-center">
            <p className="font-semibold">{title}</p>
            <div className="py-1 px-3 bg-[#0525311A] rounded-full text-xs text-[#05222D]">{type}</div>
          </div>

          <div className="my-2 flex flex-wrap gap-1">
            <div className="bg-[#E2E8F0] py-1 px-2 rounded-sm flex items-center gap-2">
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M2 2V6.5H3V3.7185L7.2815 8L3 12.2815V9.5H2V14H6.5V13H3.7185L8 8.7185L12.2815 13H9.5V14H14V9.5H13V12.2815L8.7185 8L13 3.7185V6.5H14V2H9.5V3H12.2815L8 7.2815L3.7185 3H6.5V2H2Z" fill="#45556C" />
              </svg>
              <p className="text-[#45556C] text-xs">{area} م²</p>
            </div>

            <div className="bg-[#E2E8F0] py-1 px-2 rounded-sm flex items-center gap-2">
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12.6667 1.33333H3.33333C1.49533 1.33333 0 2.82866 0 4.66666V14C0 14.3687 0.298667 14.6667 0.666667 14.6667C1.03467 14.6667 1.33333 14.3687 1.33333 14V12.6667H14.6667V14C14.6667 14.3687 14.9647 14.6667 15.3333 14.6667C15.702 14.6667 16 14.3687 16 14V4.66666C16 2.82866 14.5047 1.33333 12.6667 1.33333ZM3.33333 2.66666H12.6667C13.7693 2.66666 14.6667 3.56399 14.6667 4.66666V8.66666H13.3333C13.3333 7.19599 12.1373 5.99999 10.6667 5.99999H10C9.204 5.99999 8.48933 6.35066 8 6.90466C7.51067 6.34999 6.796 5.99999 6 5.99999H5.33333C3.86267 5.99999 2.66667 7.19599 2.66667 8.66666H1.33333V4.66666C1.33333 3.56399 2.23067 2.66666 3.33333 2.66666ZM8.66667 8.66666C8.66667 7.93133 9.26467 7.33333 10 7.33333H10.6667C11.402 7.33333 12 7.93133 12 8.66666H8.66667ZM4 8.66666C4 7.93133 4.598 7.33333 5.33333 7.33333H6C6.73533 7.33333 7.33333 7.93133 7.33333 8.66666H4ZM1.33333 11.3333V9.99999H14.6667V11.3333H1.33333Z" fill="#45556C" />
              </svg>
              <p className="text-[#45556C] text-xs">{bedrooms}</p>
            </div>

            <div className="bg-[#E2E8F0] py-1 px-2 rounded-sm flex items-center gap-2">
              <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M13.5619 7.59221C13.23 7.21596 12.7517 7.00012 12.25 7.00012H1.16667V2.61462C1.16667 2.12404 1.38833 1.63871 1.80425 1.37796C2.4395 0.979539 3.21533 1.17554 3.61667 1.71104L3.76775 1.91229L3.486 3.52871C3.45217 3.72354 3.49242 3.92421 3.59917 4.09046C3.84708 4.47662 4.37092 4.57112 4.73783 4.29579L6.84133 2.71846C7.17208 2.47054 7.2555 2.00854 7.03208 1.66029L7.0245 1.64804C6.88625 1.43221 6.65117 1.29687 6.39508 1.28521L4.69992 1.20996L4.59842 1.07462C4.21458 0.563039 3.66917 0.175122 3.0415 0.0508723C1.42333 -0.269378 0 0.966122 0 2.52771C0 2.52771 0.00233333 5.85854 0.0035 7.14946C0.0035 7.48546 0.0250833 7.81737 0.0665 8.15104C0.125417 8.62296 0.20475 9.25937 0.20475 9.25937C0.351167 10.429 0.918167 11.4568 1.74183 12.1976L1.47525 13.2768C1.39767 13.5895 1.58842 13.9056 1.90108 13.9832C1.94833 13.9949 1.995 14.0001 2.04167 14.0001C2.30358 14.0001 2.54158 13.8222 2.6075 13.5568L2.76908 12.9029C3.416 13.2319 4.14575 13.4168 4.91342 13.4168H9.24C9.95342 13.4168 10.6342 13.2575 11.2467 12.9705L11.3919 13.5568C11.4573 13.8222 11.6958 14.0001 11.9578 14.0001C12.0044 14.0001 12.0511 13.9943 12.0983 13.9832C12.411 13.9056 12.6018 13.5895 12.5242 13.2768L12.285 12.3085C13.1775 11.5606 13.7964 10.4885 13.9498 9.25996L13.986 8.96771C14.0478 8.46954 13.8938 7.96904 13.5613 7.59279L13.5619 7.59221ZM12.8287 8.82246L12.7925 9.11471C12.5691 10.902 11.0419 12.2501 9.24058 12.2501H4.914C3.11267 12.2501 1.58608 10.902 1.36267 9.11471L1.24425 8.16679H12.25C12.4198 8.16679 12.5755 8.23679 12.6875 8.36396C12.7995 8.49171 12.8497 8.65387 12.8287 8.82246Z" fill="#45556C" />
              </svg>
              <p className="text-[#45556C] text-xs">{bathrooms}</p>
            </div>

            <div className="bg-[#E2E8F0] py-1 px-2 rounded-sm flex items-center gap-2">
              <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M3.79167 11.6667V9.625C3.79167 9.45972 3.84767 9.32128 3.95967 9.20967C4.07167 9.09806 4.21011 9.04206 4.375 9.04167H6.41667V7C6.41667 6.83472 6.47267 6.69628 6.58467 6.58467C6.69667 6.47306 6.83511 6.41706 7 6.41667H9.04167V4.375C9.04167 4.20972 9.09767 4.07128 9.20967 3.95967C9.32167 3.84806 9.46011 3.79206 9.625 3.79167H11.6667V2.33334C11.6667 2.16806 11.7227 2.02961 11.8347 1.918C11.9467 1.80639 12.0851 1.75039 12.25 1.75C12.4149 1.74961 12.5535 1.80561 12.6659 1.918C12.7783 2.03039 12.8341 2.16884 12.8333 2.33334V4.375C12.8333 4.54028 12.7773 4.67892 12.6653 4.79092C12.5533 4.90292 12.4149 4.95872 12.25 4.95834H10.2083V7C10.2083 7.16528 10.1523 7.30392 10.0403 7.41592C9.92834 7.52792 9.78989 7.58372 9.625 7.58334H7.58334V9.625C7.58334 9.79028 7.52734 9.92892 7.41534 10.0409C7.30334 10.1529 7.16489 10.2087 7 10.2083H4.95834V12.25C4.95834 12.4153 4.90234 12.5539 4.79034 12.6659C4.67834 12.7779 4.53989 12.8337 4.375 12.8333H2.33334C2.16806 12.8333 2.02961 12.7773 1.918 12.6653C1.80639 12.5533 1.75039 12.4149 1.75 12.25C1.74961 12.0851 1.80561 11.9467 1.918 11.8347C2.03039 11.7227 2.16884 11.6667 2.33334 11.6667H3.79167Z" fill="#45556C" />
              </svg>
              <p className="text-[#45556C] text-xs">{floors}</p>
            </div>
          </div>

          <p className="my-3 text-[#45556C]">
            {description}
          </p>

          <div className="mt-2 p-3 rounded-xl bg-[#F1F5F9]">
            <p className="mb-3 flex items-center gap-1 font-medium text-lg">
              {price}
              <RiyalIcon />
            </p>
            <Button onClick={onClick} className="w-full bg-[#0525311A] hover:bg-[#0525311A] text-[#05222D] rounded-full font-normal">
              تسجيل الاهتمام بالوحدة
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default SubEstateCard;