import { type ActionFunctionArgs, type LoaderFunctionArgs } from "react-router";
import { Form, useActionData } from "react-router";
import { login } from "../shopify.server";
import styles from "../styles/login.css?url";

export const links = () => [{ rel: "stylesheet", href: styles }];

export const loader = async ({ request }: LoaderFunctionArgs) => {
  return {};
};

export const action = async ({ request }: ActionFunctionArgs) => {
  return login(request);
};

export default function Auth() {
  const { errors } = (useActionData<typeof action>() as any) ?? {};
  return (
    <div className="login">
      <div className="login__card">
        <h1>Deal of the Hour</h1>
        <Form method="post">
          <div>
            <label htmlFor="shop">Shop domain</label>
            <input
              type="text"
              id="shop"
              name="shop"
              placeholder="your-shop.myshopify.com"
            />
            {errors?.shop && <p className="error">{errors.shop}</p>}
          </div>
          <button type="submit">Log in</button>
        </Form>
      </div>
    </div>
  );
}