<script lang="ts">
    import Icon from "@iconify/svelte";

    let {
        inputText = $bindable(),
        isLoading,
        onSend,
    } = $props<{
        inputText: string;
        isLoading: boolean;
        onSend: () => void;
    }>();

    function handleKeyDown(event: KeyboardEvent) {
        if (event.key === "Enter" && !event.shiftKey) {
            event.preventDefault();
            onSend();
        }
    }
</script>

<div
    class="p-4 pb-8 md:pb-4 bg-[#051f18] md:bg-white/5 border-t border-[#1f473b] md:border-white/10 flex items-center gap-3 w-full"
>
    <input
        type="text"
        class="flex-1 bg-[#0d2e25] md:bg-white/10 text-white p-3.5 px-5 border border-[#1f473b] md:border-white/10 rounded-full text-[15px] outline-none transition-all duration-200 placeholder-gray-500 focus:border-emerald-400 focus:bg-[#11382e] md:focus:bg-white/15"
        placeholder="Ask about sustainability..."
        bind:value={inputText}
        onkeydown={handleKeyDown}
        disabled={isLoading}
    />
    <button
        class="bg-emerald-500 w-12 h-12 rounded-full flex items-center justify-center text-white shadow-lg transition-all duration-200 hover:scale-105 hover:shadow-emerald-500/50 disabled:opacity-50 disabled:hover:scale-100 disabled:cursor-not-allowed"
        onclick={onSend}
        aria-label="Send message"
        disabled={isLoading}
    >
        {#if isLoading}
            <Icon icon="ri:loader-4-line" width="24" class="animate-spin" />
        {:else}
            <Icon icon="ri:send-plane-fill" width="24" />
        {/if}
    </button>
</div>
