<script lang="ts">
    let { data } = $props();

    const names = {
        0: ["B", 0],
        1: ["KB", 0],
        2: ["MB", 1],
        3: ["GB", 2],
        4: ["TB", 3]
    };

    function size_str(size: number) {
        let iter = 0;
        while (size >= 1000) {
            iter++;
            size = size / 1000;
        }
        return size.toFixed(names[iter][1]).toString() + names[iter][0];
    }
</script>

<div class="file rounded">
    <div class="file-props">
        <p class="filename">{data.name}</p>
        <p class="progress">{size_str(data.size)}</p>
    </div>
    <select>
        <option value="android">Android</option>
        <option value="ios">iOS</option>
        <option value="win">Windows</option>
        <option value="mac">MacOS</option>
        <option value="linux">Linux</option>
    </select>
</div>

<style>
    .file {
        display: grid;
        grid-template-columns: auto auto;
        width: 100%;
        margin: 0;
        height: 3rem;
        margin-bottom: 0.5rem;
    }

    .file select {
        background-color: #447AB1;
        border: 0;
    }

    .file-props {
        display: grid;
    }

    .file-props p {
        margin: 0;
    }

    @media (prefers-color-scheme: light) {
        .file {
            background: #5C8DC0;
        }

        .file select {
            background-color: #447AB1;
        }

        .filename {
            color: white;
        }

        .progress {
            color: #D4D4D4;
        }
    }

    @media (prefers-color-scheme: dark) {
        .file {
            background: #2791FF;
        }

        .file select {
            background-color: #1780DD;
        }

        .filename {
            color: white;
        }

        .progress {
            color: #D4D4D4;
        }
    }
</style>