import Modal from "@/components/elements/Modal";
import { IFeature } from "@/types/types";
import React from "react";

interface IBillboardModalProps {
  showFeaturesModal: boolean;
  setShowFeaturesModal: (e: boolean) => void;
  features: IFeature[];
}
function BillboardFeaturesModal({
  showFeaturesModal,
  setShowFeaturesModal,
  features,
}: IBillboardModalProps) {
  
  return (
    <Modal
      isOpen={showFeaturesModal}
      onClose={() => setShowFeaturesModal(false)}
      height="500px"
    >
      <div className="flex flex-col items-center max-w-xl mx-auto pb-16">
        <span className="font-bold text-lg my-2">سایر امکانات</span>
        {features?.map((feature: IFeature, index) => (
          <div key={`${feature.title}${index}`} className="w-full">
            <div className="flex items-center gap-2 py-2">
              {feature?.value ? (
                <div className="w-6 h-6 rounded-full border-2 border-green-600"></div>
              ) : (
                <div className="w-6 h-6 rounded-full border-2 border-red-600"></div>
              )}
              <span>{feature?.title}</span>
            </div>
            <hr />
          </div>
        ))}
      </div>
    </Modal>
  );
}

export default BillboardFeaturesModal;
