/* BookingDetail.jsx — PW-004 Booking Request Detail */

const bdStyles = {
  breadcrumb: {
    fontSize: 12, color: KARE.n500, marginBottom: 8,
    display: 'flex', alignItems: 'center', gap: 6,
  },
  bcLink: { color: KARE.n500, cursor: 'pointer' },
  bcSep: { color: KARE.n300 },
  bcCur: { color: KARE.n700, fontWeight: 500, fontFamily: "'Inter', sans-serif" },
  head: {
    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    marginBottom: 24, gap: 16,
  },
  title: { fontSize: 22, fontWeight: 700, color: KARE.n900, margin: 0, letterSpacing: -0.3 },
  grid: { display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 24, alignItems: 'start' },
  card: {
    background: KARE.n000, borderRadius: 8, border: `1px solid ${KARE.n300}`,
    padding: 24, boxShadow: KARE.shadowSm, marginBottom: 16,
  },
  cardTitle: {
    fontSize: 16, fontWeight: 600, color: KARE.n900, margin: 0, marginBottom: 16,
    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
  },
  row: {
    display: 'grid', gridTemplateColumns: '120px 1fr',
    padding: '10px 0', borderBottom: `1px solid ${KARE.n100}`,
    fontSize: 13, alignItems: 'start',
  },
  rowLabel: { color: KARE.n500, fontWeight: 500 },
  rowValue: { color: KARE.n900 },
  caption: { fontSize: 12, color: KARE.n500, marginTop: 10, lineHeight: 1.5 },
  infoBanner: {
    marginTop: 14, padding: '10px 12px', borderRadius: 6,
    background: KARE.infoBg, border: `1px solid rgba(2,132,199,0.15)`,
    fontSize: 12, color: KARE.n700, display: 'flex', gap: 8, alignItems: 'flex-start',
  },
};

const IMono = ({ children }) => (
  <span style={{ fontFamily: "'JetBrains Mono', 'SF Mono', Menlo, monospace", fontSize: 12 }} dir="ltr">{children}</span>
);

const IInfo = ({ color = KARE.info }) => (
  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0, marginTop: 1 }}>
    <circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/>
  </svg>
);

const ICar = () => (
  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
    <path d="M5 17h14M7 17l-2-6h14l-2 6M6 11V6h12v5"/><circle cx="7.5" cy="17.5" r="1.5"/><circle cx="16.5" cy="17.5" r="1.5"/>
  </svg>
);

function DetailRow({ label, children }) {
  return (
    <div style={bdStyles.row}>
      <div style={bdStyles.rowLabel}>{label}</div>
      <div style={bdStyles.rowValue}>{children}</div>
    </div>
  );
}

/* -------- Booking info cards (shared) -------- */
function BookingInfoCards({ service = 'mobility' }) {
  return (
    <>
      <div style={bdStyles.card}>
        <h3 style={bdStyles.cardTitle}>예약 정보</h3>
        <DetailRow label="예약 ID"><IMono>BKG-2026-0412-001</IMono></DetailRow>
        <DetailRow label="서비스 유형">
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
            <span style={{
              width: 22, height: 22, borderRadius: 4, background: KARE.n100,
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: KARE.n700,
            }}><ICar/></span>
            Mobility · Airport Pickup (Sedan)
          </span>
        </DetailRow>
        <DetailRow label="요청 일시">
          <span dir="ltr" style={{ fontFamily: "'Inter', sans-serif", fontVariantNumeric: 'tabular-nums' }}>2026-04-12 09:47 (KST)</span>
        </DetailRow>
        <DetailRow label="인원">3 persons <span style={{ color: KARE.n500 }}>(본인 + 동반자 2)</span></DetailRow>
        <DetailRow label="Voucher ID">
          <span style={{ color: KARE.primary, cursor: 'pointer' }}><IMono>VCH-8831-22AB</IMono></span>
        </DetailRow>
        <div style={{ ...bdStyles.infoBanner, marginTop: 14 }}>
          <IInfo />
          <span>본 예약은 Integrated Voucher × Partner 1건 단위이며 부분 취소가 불가능합니다. <span style={{ fontFamily: "'JetBrains Mono', monospace", color: KARE.n500 }}>BD-029</span></span>
        </div>
      </div>

      {service === 'mobility' && (
        <div style={bdStyles.card}>
          <h3 style={bdStyles.cardTitle}>픽업 정보</h3>
          <DetailRow label="픽업 일시">
            <span dir="ltr" style={{ fontFamily: "'Inter', sans-serif" }}>2026-04-28 16:30 (KST)</span>
          </DetailRow>
          <DetailRow label="픽업 장소">
            Incheon International Airport T2, Arrival Gate 6
          </DetailRow>
          <DetailRow label="목적지">
            Lotte Hotel Seoul (30 Eulji-ro, Jung-gu)
          </DetailRow>
          <DetailRow label="수하물">2 large + 1 carry-on</DetailRow>
        </div>
      )}

      <div style={bdStyles.card}>
        <h3 style={bdStyles.cardTitle}>사용자 정보</h3>
        <DetailRow label="이름">Nguyen Thi Lan</DetailRow>
        <DetailRow label="연락처">
          <span dir="ltr" style={{ fontFamily: "'Inter', sans-serif" }}>+84 90 555 0418</span>
        </DetailRow>
        <DetailRow label="국적">Vietnam · VN</DetailRow>
        <div style={{ ...bdStyles.infoBanner }}>
          <IInfo />
          <span>개인의료정보(PHI)는 본 화면에서 제공되지 않습니다. 필요 시 KARE 운영팀으로 문의해주세요.</span>
        </div>
      </div>

      <div style={bdStyles.card}>
        <h3 style={bdStyles.cardTitle}>동반자 정보 · 2 persons</h3>
        <DetailRow label="동반자 1">Nguyen Van Minh <span style={{ color: KARE.n500 }}>· Male · 45</span></DetailRow>
        <DetailRow label="동반자 2">Nguyen Mai Linh <span style={{ color: KARE.n500 }}>· Female · 16</span></DetailRow>
        <div style={{ ...bdStyles.infoBanner }}>
          <IInfo />
          <span>동반자 서비스 적합성(예: 차량 탑승 정원, 수하물)은 파트너사 판단 후 안내 부탁드립니다. <span style={{ fontFamily: "'JetBrains Mono', monospace", color: KARE.n500 }}>INFO-CMP-001</span></span>
        </div>
      </div>
    </>
  );
}

/* -------- Action panels -------- */
function ActionPanelRequested({ service = 'mobility' }) {
  return (
    <div style={{ ...bdStyles.card, position: 'sticky', top: 16, marginBottom: 0 }}>
      <div style={{ fontSize: 11, fontWeight: 600, color: KARE.n500, letterSpacing: 0.4, textTransform: 'uppercase', marginBottom: 10 }}>
        처리 액션
      </div>
      <button style={{
        width: '100%', height: 48, borderRadius: 8, border: 'none',
        background: KARE.primary, color: KARE.n000,
        fontSize: 15, fontWeight: 600, cursor: 'pointer', fontFamily: FONT, marginBottom: 10,
      }}>승인</button>
      <button style={{
        width: '100%', height: 44, borderRadius: 8,
        background: KARE.n000, border: `1px solid ${KARE.n300}`,
        color: KARE.n700, fontSize: 14, fontWeight: 600, cursor: 'pointer', fontFamily: FONT,
      }}>거절</button>

      {service === 'mobility' && (
        <div style={{ marginTop: 14, paddingTop: 14, borderTop: `1px solid ${KARE.n100}` }}>
          <div style={{ fontSize: 11, fontWeight: 600, color: KARE.n500, letterSpacing: 0.4, textTransform: 'uppercase', marginBottom: 8 }}>
            추가 처리 (Mobility)
          </div>
          <span style={{
            display: 'inline-flex', alignItems: 'center', gap: 4,
            fontSize: 13, fontWeight: 600, color: KARE.primary, cursor: 'pointer',
          }}>기사 배정 변경 <I.chevron size={12}/></span>
        </div>
      )}

      <div style={{
        marginTop: 16, padding: '10px 12px', borderRadius: 6, background: KARE.n100,
        fontSize: 12, color: KARE.n700, display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}>
        <span>요청 이후 경과</span>
        <span style={{ fontWeight: 600, color: KARE.warning, fontFamily: "'Inter', sans-serif" }}>2h 15m</span>
      </div>
    </div>
  );
}

function ActionPanelConfirmed() {
  return (
    <div style={{
      ...bdStyles.card,
      position: 'sticky', top: 16, marginBottom: 0,
      background: KARE.successBg, border: `1px solid rgba(5,150,105,0.25)`,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 8 }}>
        <div style={{
          width: 32, height: 32, borderRadius: 999, background: KARE.success, color: KARE.n000,
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
        </div>
        <div>
          <div style={{ fontSize: 14, fontWeight: 700, color: KARE.n900 }}>확정됨</div>
          <div style={{ fontSize: 12, color: KARE.n700, fontFamily: "'Inter', sans-serif" }} dir="ltr">2026-04-15 14:20 KST</div>
        </div>
      </div>
      <div style={{ fontSize: 13, color: KARE.n700, lineHeight: 1.5, marginTop: 8 }}>
        승인 처리가 완료되었습니다. 고객에게 확정 알림이 발송되었습니다.
      </div>
      <div style={{ marginTop: 14, paddingTop: 14, borderTop: `1px solid rgba(5,150,105,0.15)` }}>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4, fontSize: 13, fontWeight: 600, color: KARE.success, cursor: 'pointer' }}>
          기사 배정 변경 <I.chevron size={12}/>
        </span>
      </div>
    </div>
  );
}

function ActionPanelRejected({ serviceKind = 'mobility' }) {
  const isPhysical = serviceKind === 'mobility' || serviceKind === 'stay';
  return (
    <div style={{ ...bdStyles.card, position: 'sticky', top: 16, marginBottom: 0 }}>
      <div style={{
        padding: '10px 12px', borderRadius: 6, background: KARE.errorBg,
        border: `1px solid rgba(220,38,38,0.2)`, marginBottom: 14,
      }}>
        <div style={{ fontSize: 11, fontWeight: 700, color: KARE.error, letterSpacing: 0.4, textTransform: 'uppercase' }}>
          Rejected · 2026-04-13 09:02
        </div>
        <div style={{ fontSize: 13, color: KARE.n900, fontWeight: 500, marginTop: 4 }}>
          DATE_UNAVAILABLE
        </div>
        <div style={{ fontSize: 12, color: KARE.n700, marginTop: 4, lineHeight: 1.5 }}>
          해당 일자에 차량 가용 편성이 없어 배정이 어렵습니다. 전일 또는 익일 확인 부탁드립니다.
        </div>
      </div>

      <div style={{ fontSize: 11, fontWeight: 600, color: KARE.n500, letterSpacing: 0.4, textTransform: 'uppercase', marginBottom: 10 }}>
        후속 처리
      </div>
      {isPhysical ? (
        <Timeline items={[
          { label: '재배정 대기', done: true, color: KARE.warning, date: '2026-04-13 09:05' },
          { label: '재배정 완료', done: false, color: KARE.n500, date: '–' },
        ]}/>
      ) : (
        <Timeline items={[
          { label: '중계 진행 중', done: true, color: KARE.info, date: '2026-04-13 09:05' },
          { label: '중계 완료', done: false, color: KARE.n500, date: '–' },
        ]}/>
      )}
    </div>
  );
}

function ActionPanelSuspended() {
  return (
    <div style={{ ...bdStyles.card, position: 'sticky', top: 16, marginBottom: 0, opacity: 0.95 }}>
      <div style={{ fontSize: 11, fontWeight: 600, color: KARE.n500, letterSpacing: 0.4, textTransform: 'uppercase', marginBottom: 10 }}>
        처리 액션
      </div>
      <button disabled style={{
        width: '100%', height: 48, borderRadius: 8, border: 'none',
        background: KARE.n300, color: KARE.n500,
        fontSize: 15, fontWeight: 600, cursor: 'not-allowed', fontFamily: FONT, marginBottom: 10,
      }}>승인</button>
      <button disabled style={{
        width: '100%', height: 44, borderRadius: 8,
        background: KARE.n100, border: `1px solid ${KARE.n300}`,
        color: KARE.n500, fontSize: 14, fontWeight: 600, cursor: 'not-allowed', fontFamily: FONT,
      }}>거절</button>
      <div style={{
        marginTop: 14, padding: '10px 12px', borderRadius: 6,
        background: KARE.warningBg, border: `1px solid rgba(217,119,6,0.2)`,
        fontSize: 12, color: KARE.warning, display: 'flex', alignItems: 'flex-start', gap: 8, lineHeight: 1.5,
      }}>
        <I.lock /> 파트너사 정지 상태에서는 예약 처리가 불가능합니다.
      </div>
    </div>
  );
}

function Timeline({ items }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
      {items.map((it, i) => (
        <div key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 12, position: 'relative' }}>
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
            <span style={{
              width: 10, height: 10, borderRadius: 999, background: it.color,
              boxShadow: it.done ? `0 0 0 3px ${it.color}22` : 'none',
            }}/>
            {i < items.length - 1 && (
              <span style={{ width: 2, height: 22, background: KARE.n300, marginTop: 4 }}/>
            )}
          </div>
          <div style={{ display: 'flex', flexDirection: 'column' }}>
            <span style={{ fontSize: 13, fontWeight: 600, color: it.done ? KARE.n900 : KARE.n500 }}>{it.label}</span>
            <span style={{ fontSize: 11, color: KARE.n500, fontFamily: "'Inter', sans-serif" }} dir="ltr">{it.date}</span>
          </div>
        </div>
      ))}
    </div>
  );
}

/* -------- Page body -------- */
function BookingDetailBody({ variant = 'requested' }) {
  const status = variant === 'suspended' ? 'requested' : variant;
  return (
    <>
      <div style={bdStyles.breadcrumb}>
        <span style={bdStyles.bcLink}>예약 요청</span>
        <span style={bdStyles.bcSep}>/</span>
        <span style={bdStyles.bcCur}>BKG-2026-0412-001</span>
      </div>
      <div style={bdStyles.head}>
        <h1 style={bdStyles.title}>예약 요청 상세</h1>
        <StatusBadge kind={status} />
      </div>
      <div style={bdStyles.grid}>
        <div>
          <BookingInfoCards service="mobility" />
        </div>
        <div>
          {variant === 'requested' && <ActionPanelRequested service="mobility" />}
          {variant === 'confirmed' && <ActionPanelConfirmed />}
          {variant === 'rejected'  && <ActionPanelRejected  serviceKind="mobility" />}
          {variant === 'suspended' && <ActionPanelSuspended />}
        </div>
      </div>
      <div style={{ height: 32 }} />
    </>
  );
}

/* -------- Reject Modal (2 steps) -------- */
function ModalShell({ title, children, footer, width = 560 }) {
  return (
    <div style={{
      position: 'absolute', inset: 0, background: 'rgba(17,24,39,0.55)',
      display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 10,
    }}>
      <div style={{
        width, background: KARE.n000, borderRadius: 12, boxShadow: KARE.shadowLg,
        display: 'flex', flexDirection: 'column', maxHeight: '90%', overflow: 'hidden',
      }}>
        <div style={{
          padding: '18px 24px', borderBottom: `1px solid ${KARE.n100}`,
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        }}>
          <h2 style={{ fontSize: 18, fontWeight: 600, color: KARE.n900, margin: 0 }}>{title}</h2>
          <span style={{ color: KARE.n500, cursor: 'pointer', fontSize: 20, lineHeight: 1 }}>×</span>
        </div>
        <div style={{ padding: 24, overflow: 'auto' }}>{children}</div>
        <div style={{
          padding: '14px 24px', borderTop: `1px solid ${KARE.n100}`,
          display: 'flex', justifyContent: 'flex-end', gap: 8,
        }}>{footer}</div>
      </div>
    </div>
  );
}

function RadioItem({ label, hint, selected }) {
  return (
    <div style={{
      padding: '12px 14px', borderRadius: 6,
      border: `1px solid ${selected ? KARE.primary : KARE.n300}`,
      background: selected ? KARE.primaryHover : KARE.n000,
      display: 'flex', alignItems: 'center', gap: 12, cursor: 'pointer',
    }}>
      <span style={{
        width: 16, height: 16, borderRadius: 999,
        border: `2px solid ${selected ? KARE.primary : KARE.n300}`,
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
      }}>
        {selected && <span style={{ width: 8, height: 8, borderRadius: 999, background: KARE.primary }} />}
      </span>
      <div style={{ flex: 1 }}>
        <div style={{ fontSize: 13, fontWeight: 600, color: KARE.n900, fontFamily: "'Inter', sans-serif" }}>{label}</div>
        {hint && <div style={{ fontSize: 12, color: KARE.n500, marginTop: 2 }}>{hint}</div>}
      </div>
    </div>
  );
}

function RejectStep1() {
  const reasons = [
    { id: 'FULLY_BOOKED',      label: 'FULLY_BOOKED',       hint: '해당 일자 예약이 모두 마감됨', selected: false },
    { id: 'DATE_UNAVAILABLE',  label: 'DATE_UNAVAILABLE',   hint: '요청 일자에 서비스 운영 불가', selected: true  },
    { id: 'SERVICE_SUSPENDED', label: 'SERVICE_SUSPENDED',  hint: '해당 서비스 한시적 운영 중단' },
    { id: 'CAPACITY_EXCEEDED', label: 'CAPACITY_EXCEEDED',  hint: '인원 수가 최대 수용 인원 초과' },
    { id: 'OTHER',             label: 'OTHER',              hint: '기타 사유 (사유 입력 필수)' },
  ];
  return (
    <div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 18 }}>
        <StepDot n="1" active/>
        <div style={{ flex: 1, height: 1, background: KARE.n300 }}/>
        <StepDot n="2"/>
      </div>
      <div style={{ fontSize: 13, color: KARE.n700, marginBottom: 14 }}>
        거절 사유를 선택해주세요. 고객에게 안내되는 내용입니다.
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        {reasons.map(r => <RadioItem key={r.id} {...r} />)}
      </div>
    </div>
  );
}

function RejectStep2() {
  return (
    <div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 18 }}>
        <StepDot n="1" done/>
        <div style={{ flex: 1, height: 1, background: KARE.primary }}/>
        <StepDot n="2" active/>
      </div>
      <div style={{ fontSize: 13, color: KARE.n700, marginBottom: 10 }}>
        선택 사유: <span style={{ fontWeight: 600, color: KARE.n900, fontFamily: "'Inter', sans-serif" }}>DATE_UNAVAILABLE</span>
      </div>
      <div style={{ fontSize: 12, fontWeight: 600, color: KARE.n700, marginTop: 14, marginBottom: 6 }}>
        상세 사유 <span style={{ color: KARE.n500, fontWeight: 400 }}>(선택, 10~500자 · OTHER 선택 시 필수)</span>
      </div>
      <textarea
        readOnly
        defaultValue="해당 일자(2026-04-28)에 공항 픽업 차량 가용 편성이 없습니다. 전일 16:30 또는 익일 10:00로 일정 조정이 가능할 경우 재요청 부탁드립니다."
        style={{
          width: '100%', height: 140, padding: 12, borderRadius: 6,
          border: `1px solid ${KARE.n300}`, outline: 'none', resize: 'none',
          fontSize: 13, fontFamily: FONT, color: KARE.n900, lineHeight: 1.5,
        }}
      />
      <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 6, fontSize: 11, color: KARE.n500 }}>
        <span>한글, 영문 모두 입력 가능</span>
        <span style={{ fontFamily: "'Inter', sans-serif" }}>98 / 500</span>
      </div>
    </div>
  );
}

function StepDot({ n, active, done }) {
  const bg = done ? KARE.primary : active ? KARE.primary : KARE.n000;
  const color = done || active ? KARE.n000 : KARE.n500;
  const border = done || active ? KARE.primary : KARE.n300;
  return (
    <span style={{
      width: 24, height: 24, borderRadius: 999,
      background: bg, border: `1px solid ${border}`, color,
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      fontSize: 12, fontWeight: 700, fontFamily: "'Inter', sans-serif",
    }}>{done ? '✓' : n}</span>
  );
}

/* -------- Variants -------- */
function BookingDetailRequested() {
  return <MainLayout sidebarActive="booking"><BookingDetailBody variant="requested" /></MainLayout>;
}
function BookingDetailConfirmed() {
  return <MainLayout sidebarActive="booking"><BookingDetailBody variant="confirmed" /></MainLayout>;
}
function BookingDetailRejected() {
  return <MainLayout sidebarActive="booking"><BookingDetailBody variant="rejected" /></MainLayout>;
}
function BookingDetailSuspended() {
  const banner = (
    <div style={{
      background: KARE.warningBg, borderBottom: `1px solid rgba(217,119,6,0.25)`,
      padding: '12px 32px', display: 'flex', alignItems: 'center', gap: 12,
    }}>
      <I.warn size={18}/>
      <div style={{ flex: 1, fontSize: 13, color: KARE.n900 }}>
        <span style={{ fontWeight: 600, color: KARE.warning, marginRight: 6 }}>파트너사가 정지되었습니다.</span>
        예약 처리 기능이 제한됩니다. 사유: 계약 만료 후 재계약 미완료.
      </div>
      <button style={{
        background: KARE.warning, color: KARE.n000, border: 'none',
        padding: '7px 12px', borderRadius: 6, fontSize: 12, fontWeight: 600, cursor: 'pointer', fontFamily: FONT,
      }}>1:1 문의 등록</button>
    </div>
  );
  return (
    <MainLayout sidebarActive="booking" suspended banner={banner}>
      <BookingDetailBody variant="suspended" />
    </MainLayout>
  );
}

function BookingDetailRejectModal1() {
  return (
    <div style={{ position: 'relative', width: 1280, height: 'auto' }}>
      <MainLayout sidebarActive="booking"><BookingDetailBody variant="requested" /></MainLayout>
      <ModalShell
        title="예약 거절"
        footer={
          <>
            <button style={btnGhost}>취소</button>
            <button style={btnPrimary}>다음 →</button>
          </>
        }
      >
        <RejectStep1 />
      </ModalShell>
    </div>
  );
}
function BookingDetailRejectModal2() {
  return (
    <div style={{ position: 'relative', width: 1280, height: 'auto' }}>
      <MainLayout sidebarActive="booking"><BookingDetailBody variant="requested" /></MainLayout>
      <ModalShell
        title="예약 거절"
        footer={
          <>
            <button style={btnGhost}>← 이전</button>
            <button style={btnDanger}>거절 확정</button>
          </>
        }
      >
        <RejectStep2 />
      </ModalShell>
    </div>
  );
}

const btnPrimary = {
  height: 40, padding: '0 18px', borderRadius: 6, border: 'none',
  background: KARE.primary, color: KARE.n000,
  fontSize: 14, fontWeight: 600, cursor: 'pointer', fontFamily: FONT,
};
const btnGhost = {
  height: 40, padding: '0 16px', borderRadius: 6,
  background: KARE.n000, border: `1px solid ${KARE.n300}`,
  color: KARE.n700, fontSize: 14, fontWeight: 500, cursor: 'pointer', fontFamily: FONT,
};
const btnDanger = {
  height: 40, padding: '0 18px', borderRadius: 6, border: 'none',
  background: KARE.error, color: KARE.n000,
  fontSize: 14, fontWeight: 600, cursor: 'pointer', fontFamily: FONT,
};

Object.assign(window, {
  BookingDetailRequested, BookingDetailConfirmed,
  BookingDetailRejected, BookingDetailSuspended,
  BookingDetailRejectModal1, BookingDetailRejectModal2,
});