import UnitType from "../types/UnitType";

function UnitTypeCard({ project, type }: { project: string; type: UnitType }) {
  return (
    <div className="bg-white p-4 2xl:p-[1.111vw] rounded-2xl 2xl:rounded-[1.111vw] space-y-4 2xl:space-y-[1.111vw]">
      <div className="space-y-1 2xl:space-y-[0.278vw]">
        <p className="text-s">{project}</p>
        <div className="flex items-center gap-2 2xl:gap-[0.556vw]">
          {type.wings && (
            <>
              <p className="text-caption-m text-[#0D1922]/70">{type.wings}</p>
              <div className="w-1 h-1 bg-[#E2E2DC] rounded-full"></div>
            </>
          )}
          <p className="text-caption-m text-[#0D1922]/70">{type.floors}</p>
        </div>
      </div>
      <img src={type.img} alt="" />
      <div className="space-y-1 2xl:space-y-[0.278vw]">
        <p className="text-s text-[#0D1922]/70">{type.area}</p>
        <p className="text-h4 font-medium">{type.name}</p>
      </div>
    </div>
  );
}

export default UnitTypeCard;