import React from 'react';
import CardHeader from './project-details-card/CardHeader';
import ProjectImage from './project-details-card/ProjectImage';
import ProjectInfo from './project-details-card/ProjectInfo';
import ProjectStats from './project-details-card/ProjectStats';
import ProjectPrice from './project-details-card/ProjectPrice';
import ProjectDescription from './project-details-card/ProjectDescription';
import ViewProjectButton from './project-details-card/ViewProjectButton';
import { BathIcon, BedAltIcon, ZeroEightIcon, StairsIcon } from '../icons/RandomIcons';

interface ProjectDetailsCardProps {
  data?: any;
  onClose?: () => void;
}

const ProjectDetailsCard: React.FC<ProjectDetailsCardProps> = ({ data, onClose }) => {
  if (!data) return null;

  // Map backend property/project data to the format expected by the sub-components
  const stats = [
    {
      icon: <BathIcon />,
      value: data.bathrooms?.toString() || "0",
      label: "حمامات",
      gap: "gap-[7px]",
    },
    {
      icon: <BedAltIcon />,
      value: data.bedrooms?.toString() || "0",
      label: "غرف نوم",
      gap: "gap-[7px]",
    },
    {
      icon: <ZeroEightIcon />,
      value: `${data.area || 0} م²`,
      label: "",
      gap: "gap-1.5",
    },
    {
      icon: <StairsIcon />,
      value: data.floors?.toString() || "0",
      label: "دور",
      gap: "gap-[5px]",
    },
  ];

  return (
    <div className="flex flex-col items-start bg-slate-50 w-full lg:w-[531px] py-4 gap-3 rounded-xl px-4">
      <CardHeader title={data.badge || "تفاصيل العقار"} onClose={onClose} />
      <div className='flex items-center gap-3 md:block'>
        <ProjectImage imageUrl={data.image} />
        <div className="flex flex-col gap-2">
          <ProjectInfo name={data.title} location={data.subtitle} price={data.price} />
          <ProjectStats stats={stats} />
          <ProjectPrice price={data.price} name={data.title} />
        </div>
      </div>
      <ProjectDescription description={data.description || "لا يوجد وصف متاح"} />
      <ViewProjectButton href={data.badge === 'مميز' || data.projectsno ? `/project/${data.id}` : `/real-estate/${data.id}`} />
    </div>
  );
};

export default ProjectDetailsCard;