<script lang="ts">
  import type { HTMLFormAttributes } from "svelte/elements";
  import Button from "./Button.svelte";
  import Input from "./Input.svelte";

  type Props = HTMLFormAttributes & {
    placeholder?: string;
    buttonText?: string;
    name?: string;
  };

  let {
    placeholder = "you@example.com",
    buttonText = "Sign up",
    name = "email",
    ...props
  }: Props = $props();
</script>

<form {...props} class="flex flex-row justify-stretch items-stretch gap-1">
  <Input
    class=""
    type="email"
    {name}
    {placeholder}
    required
    autocomplete="email"
  />
  <Button type="submit" class="h-full">{buttonText}</Button>
</form>
