<script lang="ts">
    import Card from "./Card.svelte";
    import type { CardConfig, LookupCardConfig } from "./Card.types";

    export let config: LookupCardConfig;

    let upstreamConfig: CardConfig = {
        title: config.title,
        showHelp: false, // If enabled without showRefresh, cards will be shifted to left!
        showRefresh: false,
        helpText: config.helpText,
        onRefresh: () => {},
        refreshing: false,
    };
</script>

<Card config={upstreamConfig}>
    <form action={config.formAction}>
        <input type="text" name={config.fieldName} placeholder={config.placeholder} maxlength={config.maxLen} autocomplete="off" />
        <br />
        <button type="submit">Submit</button>
    </form>
</Card>

<style>
    input {
        margin: 4px;
        width: 75%;
        max-width: 250px;
        text-align: center;
        text-transform: uppercase;
        font-family: urwgothic, "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
        font-size: 15px;
        height: 30px;
        border: none;
        border-radius: 20px;
        box-shadow: var(--box-shadow);
        transition: all 0.3s ease;
    }

    button {
        margin: 5px;
        background-color: var(--island-button-color);
        color: white;
        border: none;
        border-radius: 20px;
        font-family: urwgothic, "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
        font-size: 16px;
        width: 40%;
        max-width: 200px;
        height: 30px;
        box-shadow: var(--box-shadow);
        transition: all 0.3s ease;
    }

    input:hover {
        box-shadow: var(--box-shadow-dark);
    }

    button:hover {
        background-color: rgb(45, 45, 45);
        box-shadow: var(--box-shadow-dark);
    }
</style>
