import Image from 'next/image';
import { ArrowUpLeft } from 'lucide-react';
import { Bed, Bath, Ruler, Layers } from 'lucide-react';
import { Button } from '../ui/button';

interface MarketCardProps {
  title: string;
  subtitle: string;
  image: string;
  price: string;
  area: number;
  bedrooms: number;
  bathrooms: number;
  floors: number;
}

export default function MarketCard({
  title,
  subtitle,
  image,
  price,
  area,
  bedrooms,
  bathrooms,
  floors,
}: MarketCardProps) {
  return (
    <div className="relative flex w-full md:w-[612px] p-4 gap-2 rounded-2xl overflow-hidden bg-white border border-[#F5F5F5]">
      <div className="absolute inset-0 border-b-2 border-gray-100 rounded-2xl pointer-events-none" />

      {/* الصورة */}
      <div className="relative w-full sm:w-[118px] md:w-[268px] h-[227px] md:h-56  rounded-xl overflow-hidden">
        <Image
          src={image}
          alt={title}
          fill
          className="object-cover rounded-xl"
        />
      </div>

      {/* المحتوى النصي */}
      <div className="flex flex-col justify-between gap-4 md:gap-4 w-full sm:w-[193px] sm:gap-2 md:w-auto">
        <div>
          {/* العنوان - تقليل حجمه على الجوال */}
          <h3 className="text-base sm:text-l font-medium text-gray-800 text-right leading-normal tracking-normal">
            {title}
          </h3>
          {/* الوصف - تقليل حجمه على الجوال */}
          <p className="text-xs sm:text-sm text-gray-500 text-right font-normal">
            {subtitle}
          </p>
        </div>

        {/* التفاصيل */}
        <div className="flex flex-wrap gap-1 md:gap-1">
          <div className="flex items-center gap-0.5 bg-gray-100 text-gray-700 text-xs px-2 py-1 rounded-full">
            <Ruler className="h-4 w-4" />
            {area} م²
          </div>
          <div className="flex items-center gap-0.5 bg-gray-100 text-gray-700 text-xs px-2 py-1 rounded-full">
            <Bed className="h-4 w-4" />
            {bedrooms} غرف 
          </div>
           <div className="flex items-center gap-0.5 bg-gray-100 text-gray-700 text-xs px-2 py-1 rounded-full">
            <Layers className="h-4 w-4" />
            {floors} دور
          </div>
          <div className="flex items-center gap-0.5 bg-gray-100 text-gray-700 text-xs px-2 py-1 rounded-full">
            <Bath className="h-4 w-4" />
            {bathrooms} حمامات
          </div>
         
        </div>

        {/* السعر */}
        <div>
          <p className="text-xs sm:text-sm text-gray-500 text-right">السعر</p>
          <div className="text-xl sm:text-2xl flex items-center gap-2 text-primary text-right">
            {price}
            <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
              <g clipPath="url(#clip0_4232_4947)">
              <path d="M17.3804 15.2793C17.2981 15.6181 17.1852 15.9469 17.0425 16.2627L11.2056 17.373C11.2879 17.0344 11.4007 16.7054 11.5435 16.3896L17.3804 15.2793Z" fill="#052531" stroke="#052531"/>
              <path d="M17.3851 12.8339C17.7063 12.1968 17.9187 11.5051 18 10.7799L12.7051 11.7875V9.85051L17.385 8.96067C17.7062 8.32356 17.9185 7.63187 17.9998 6.90664L12.7049 7.91339V0.947429C11.8936 1.35503 11.173 1.89758 10.5873 2.53756V8.31625L8.46967 8.71898V0C7.65833 0.407453 6.93778 0.950151 6.35206 1.59013V9.12156L1.61387 10.0224C1.29267 10.6595 1.08019 11.3512 0.998683 12.0765L6.35206 11.0585V13.4978L0.61487 14.5887C0.293664 15.2258 0.0813422 15.9175 0 16.6427L6.00523 15.5008C6.49408 15.4099 6.91425 15.1513 7.18741 14.7954L8.28874 13.3345V13.3342C8.40306 13.1831 8.46967 13.0008 8.46967 12.8045V10.6558L10.5873 10.2531V14.127L17.385 12.8336L17.3851 12.8339Z" fill="#052531"/>
              </g>
              <defs>
              <clipPath id="clip0_4232_4947">
              <rect width="18" height="18" fill="white"/>
              </clipPath>
              </defs>
            </svg>
          </div>
        </div>

        {/* الزر - متجاوب */}
        <Button
          variant="outline"
          className="w-full md:w-[314px] h-[40px] border-gray-200 bg-primary text-white rounded-full text-xs sm:text-sm font-medium"
          asChild
        >
          <a href="">
            تقديم طلب التسويق
            <ArrowUpLeft className="mr-1 h-4 w-4" />
          </a>
        </Button>
      </div>
    </div>
  );
}