'use client';

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

interface PropertyCardProps {
  id: number;
  title: string;
  subtitle: string;
  image: string;
  badge?: string;
  price: string;
  area: number;
  bedrooms: number;
  bathrooms: number;
  floors: number;
  company: string;
  clientType?: string;
  propertyType?: string;
  companyLogo: string;
  companyTitle?: string;
  isFavorite: boolean;
  classNames?: string;
}

export function PropertyCard({
  id,
  title,
  subtitle,
  image,
  badge,
  price,
  area,
  bedrooms,
  bathrooms,
  floors,
  company,
  clientType,
  propertyType,
  companyLogo,
  companyTitle,
  isFavorite,
  classNames,
}: PropertyCardProps) {
  return (
    <div className={`relative w-full max-w-[350px] h-[527px] flex flex-col rounded-3xl overflow-hidden bg-white border border-[#F5F5F5] hover:shadow-lg transition-shadow duration-300 ${classNames}`}>

      {badge && (
<div className="absolute inset-0 border border-[#cc9d48] opacity-40 rounded-3xl pointer-events-none" />

)}

      <div className="flex items-center h-[60px] gap-2 p-4 pb-1">
        <Image src={companyLogo} alt={company} width={30} height={30} className="rounded-full object-cover aspect-square" />
        <div className="flex flex-col">
<span className="font-semibold text-[15px] text-[#1D293D] leading-tight">            
            {company}</span>
<span className="font-light text-[11px] text-gray-400">

            {clientType}</span>
        </div>
      </div>

     <div className="relative h-[310px] rounded-[24px] m-4 mb-0 overflow-hidden bg-[#F3F4F6]">
  <Image
src="makeen-46.png"
    alt={title}
    fill
    priority
    className="object-cover w-full h-full"
  />

        <Button
          variant="ghost"
          size="icon"
          className={`absolute top-4 left-4 rounded-full p-2 ${isFavorite ? 'text-red-500' : 'text-white'} bg-[#052531]/70`}
        >
          <Heart className={`h-5 w-5 ${isFavorite ? 'fill-red-500' : ''}`} />
        </Button>

        {badge && (
          <div className="absolute top-4 right-4 bg-green-100 text-green-600 text-xs font-bold px-2 py-1 rounded-full">
            {badge}
          </div>
        )}
      </div>

      <div className="p-4 flex-grow flex flex-col">
<h3 className="text-[14px] font-semibold text-gray-800 text-right leading-normal tracking-normal">
            {title}
        </h3>
<p className="text-[12px] font-normal text-gray-400 text-right">  
  
          {subtitle}</p>

        <div className="flex flex-wrap gap-1 pt-2">
          <div className="flex items-center gap-1 bg-gray-100 text-gray-700 text-[11px] px-2 py-[5px] rounded-full"
          
          >
            <Ruler className="h-4 w-4" />
            {area} م²
          </div>
          <div className="flex items-center gap-1 bg-gray-100 text-gray-700 text-[11px] px-2 py-[5px] rounded-full"
          
          >
            <Bed className="h-4 w-4" />
            {bedrooms} غرف نوم
          </div>
          <div className="flex items-center gap-.5 bg-gray-100 text-gray-700 text-xs px-2 py-1 rounded-full">
            <Bath className="h-4 w-4" />
            {bathrooms} حمامات
          </div>
          <div className="flex items-center gap-.5 bg-gray-100 text-gray-700 text-xs px-2 py-1 rounded-full">
            <Layers className="h-4 w-4" />
            {floors} دور
          </div>
        </div>

        <div className="flex items-center justify-between mt-auto pt-4">
          <div className="pt-2">
<p className="text-[12px] text-gray-500 text-right">السعر              
            </p>
<div className="text-[20px] flex items-center gap-1 text-primary font-bold">              {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-[40px] h-[40px] border-gray-200 bg-gray-100 hover:bg-gray-400 text-[#05222D] rounded-full"
            asChild
          >
            <a href={`/real-estate/${id}`}>
              <ArrowUpLeft className="h-[20px] w-[20px]" />
            </a>
          </Button>
        </div>
      </div>
    </div>
  );
}