import type { LoaderFunctionArgs } from "react-router";
import { Form, redirect } from "react-router";
import styles from "../../styles/landing.module.css";

export const loader = async ({ request }: LoaderFunctionArgs) => {
  const url = new URL(request.url);
  if (url.searchParams.get("shop")) return redirect(`/auth/login?${url.searchParams}`);
  return null;
};

export default function Index() {
  return (
    <main className={styles.wrap}>
      <div className={styles.card}>
        <div className={styles.brand}>SB</div>
        <h1>SweetBengal Delivery Charge</h1>
        <p>Pan-India delivery checkout with ₹0 online shipping and separate delivery-charge collection.</p>
        <Form method="get" action="/auth/login" className={styles.form}>
          <label htmlFor="shop">Shop domain</label>
          <input id="shop" name="shop" placeholder="sweetbengal.myshopify.com" autoComplete="off" />
          <button type="submit">Open app</button>
        </Form>
      </div>
    </main>
  );
}