import { CheckCircle, Article } from "@phosphor-icons/react/dist/ssr";
import { StepProps } from "./types";
import { titleStyle, optionCardStyle } from "./styles";

export const PropertyInstantApproval = ({ data, updateData }: StepProps) => {
    return (
        <div className="flex flex-col">
            <h2 className={titleStyle}>Decide how you'll confirm reservations</h2>
            <div className="flex flex-col gap-4">
                <button
                    type="button"
                    onClick={() => updateData('instantBook', true)}
                    className={`${optionCardStyle(data.instantBook === true)} w-full flex-row items-start text-left`}
                >
                    <CheckCircle size={32} weight={data.instantBook === true ? "fill" : "regular"} className="shrink-0" />
                    <div className="flex flex-col">
                        <span className="font-bold text-lg">Use Instant Book</span>
                        <span className="text-gray-600">Guests can book automatically. No need to approve reservations. You will be notified of each booking request.</span>
                    </div>
                </button>
                <button
                    type="button"
                    onClick={() => updateData('instantBook', false)}
                    className={`${optionCardStyle(data.instantBook === false)} w-full flex-row items-start text-left`}
                >
                    <Article size={32} weight={data.instantBook === false ? "fill" : "regular"} className="shrink-0" />
                    <div className="flex flex-col">
                        <span className="font-bold text-lg">Approve manually</span>
                        <span className="text-gray-600">You approve or decline booking requests for each reservation. You will be notified of each booking request. </span>
                    </div>
                </button>
            </div>
        </div>
    )
}
