import { createFileRoute } from "@tanstack/solid-router";
import { Button } from "~/components/ui/button";
import {
  Card,
  CardAction,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "~/components/ui/card";
import { Input } from "~/components/ui/input";
import { Label } from "~/components/ui/label";

export const Route = createFileRoute("/")({ component: App });

function App() {
  return (
    <div class="flex min-h-svh p-6">
      <div class="flex max-w-md min-w-0 flex-col gap-4 text-sm leading-loose">
        <div>
          <h1 class="font-medium">
            Project and deployment ready and automated!
          </h1>
          <p>Hallo World();</p>
          <p>Tamaraa is the last try!</p>
          <p>You may nopw add components and start building.</p>
          <p>We&apos;ve already added the button component for you.</p>
          <Button class="mt-2">Button</Button>
        </div>
        <div class="font-mono text-xs text-muted-foreground">
          (Press <kbd>d</kbd> to toggle dark mode)
        </div>

        <Card class="w-full max-w-sm">
          <CardHeader>
            <CardTitle>Login to your account</CardTitle>
            <CardDescription>
              Enter your email below to login to your account
            </CardDescription>
            <CardAction>
              <Button variant="link">Sign Up</Button>
            </CardAction>
          </CardHeader>
          <CardContent>
            <form>
              <div class="flex flex-col gap-6">
                <div class="grid gap-2">
                  <Label for="email">Email</Label>
                  <Input
                    id="email"
                    type="email"
                    placeholder="m@example.com"
                    required
                  />
                </div>
                <div class="grid gap-2">
                  <div class="flex items-center">
                    <Label for="password">Password</Label>
                    <a
                      href="#"
                      class="ml-auto inline-block text-sm underline-offset-4 hover:underline"
                    >
                      Forgot your password?
                    </a>
                  </div>
                  <Input id="password" type="password" required />
                </div>
              </div>
            </form>
          </CardContent>
          <CardFooter class="flex-col gap-2">
            <Button type="submit" class="w-full">
              Login
            </Button>
            <Button variant="outline" class="w-full">
              Login with Google
            </Button>
          </CardFooter>
        </Card>
      </div>
    </div>
  );
}