<script>
    import { formatDistanceToNow, parseJSON } from "date-fns";
    import Avatar from "../../svelte/account/Avatar.svelte";
    import { previewTitle } from "../../svelte/records/Preview";
    import Preview from "../../svelte/files/Preview.svelte";
    import { usernameById } from "../../svelte/account/users";

    let { channel, users, record, graph } = $props();
    let schema = $derived(
        channel.schemas.find((s) => s.name === record.schema),
    );
    let frieldlyUpdatedAt = formatDistanceToNow(
        parseJSON(record._sys.updatedAt),
        { addSuffix: true },
    );
</script>

<td>
    <div class="row-name">
        {#if record.status === "draft"}
            <span class="status">DRAFT</span>
        {/if}
        {#if schema.type === "files"}
            <!-- <Preview {record} size="tiny" showFilename={true} /> -->
        {:else}
            <a href="{channel.lucentUrl}/records/{record.id}">
                <!-- {previewTitle(channel.schemas, record, graph)} -->
            </a>
        {/if}
    </div>
</td>
<td><a href="{channel.lucentUrl}/content/{schema.name}">{schema.label}</a> </td>

<td>
    <div style="display: flex;gap: 14px">
        <Avatar name={usernameById(users, record._sys.updatedBy)} side={24} />
        <div class="ms-2">
            {frieldlyUpdatedAt}
        </div>
    </div>
</td>
