<script>
    import { goto } from "$app/navigation";
    import TimeAgo from "./TimeAgo.svelte";

    export let data;

    function gotoEdit(){
        goto(`editNote/${data.id}`);
    }
</script>

<!-- svelte-ignore a11y_click_events_have_key_events -->
<!-- svelte-ignore a11y_no_static_element_interactions -->
<div class="note" on:click={gotoEdit}>
    <h2>{data.title}</h2>
    <p>{data.content}</p>
    <TimeAgo timestamp={data.createdOn}></TimeAgo>
</div>

<style>
    .note {
        background-color: rgba(0, 0, 0, 0.432);
        width: 400px;
        padding: 10px;
        border-radius: 25px;
        border: 2px solid rgba(255, 255, 255, 0.432);
        transition: transform 0.3s ease, box-shadow 0.3s ease;

        display: flex;
        flex-direction: column;
        justify-content: space-between;


        text-align: center;
    }

    .note:hover {
        transform: scale(1.05);
        box-shadow: 0 0 16px rgba(255, 255, 255, 0.2);
        cursor: pointer;
    }

    .note h2 {
        text-align: center;
    }

    .note p {
        text-align: left;
        white-space: pre-wrap;
    }
</style>