import clsx from "clsx";

export interface FacilitiesPopupProps {
  title: string;
  caption: string;
  description: string;
  className?: string;
}

function FacilityPopup({
  title,
  caption,
  description,
  className,
}: FacilitiesPopupProps) {
  return (
    <div
      className={clsx(
        "select-none 2xl:space-y-[1.111vw] space-y-4 2xl:w-[20.556vw] md:max-2xl:w-[296px] w-dvw bg-white 2xl:p-[0.833vw] p-3 2xl:rounded-[0.833vw] md:rounded-xl rounded-t-xl",
        className
      )}
    >
      <div className="2xl:space-y-[0.556vw] space-y-2">
        <p className="subheadline-m [font-family:New_York_Large]">{title}</p>
        <p className="caption font-medium text-[#A7A08E]">{caption}</p>
      </div>
      <hr className="border-[#ECE8DF] 2xl:border-[0.069vw] border-[1px]" />
      <p className="text-s">{description}</p>
    </div>
  );
}

export default FacilityPopup;
