Vue.component('cargo-screen', {
    template: `
        <div>
            <div class="logo">
                <img src="imagens/logo.png" alt="Logo da Empresa">
            </div>
            <h2>Selecione o tipo de entrega</h2>
            <div class="cargo-buttons">
                <button class="cargo-button" @click="$emit('switch-view', 'load_list')">
                    <a href="#" @click.prevent="$emit('switch-view', 'load_list')">Listar Entregas</a>
                </button>
                <button class="cargo-button" @click="$emit('switch-view', 'register-cargo-form')">
                    <a href="#" @click.prevent="$emit('switch-view', 'register-cargo-form')">Cadastrar Entrega</a>
                </button>
                <button class="cargo-button" @click="$emit('switch-view', '#')">
                    <a href="#" @click.prevent="$emit('switch-view', '#')">Alterar</a>
                </button>
                <button class="cargo-button" @click="$emit('switch-view', '#')">
                    <a href="#" @click.prevent="$emit('switch-view', '#')">Alterar</a>
                </button>
            </div>
            <button class="company-button" @click.prevent="$emit('switch-view', 'register-company-form')">
                <img src="imagens/empresa.png" alt="Cadastrar Empresa" class="company-icon">
            </button>
            <button class="button-logout" @click="$emit('switch-view', 'login-form')">
                <a href="#" @click.prevent="$emit('switch-view', 'login-form')">Sair</a>
            </button>
        </div>
    `,
    methods: {
        viewCargoList(cargoType) {
            console.log("Tipo de entrega selecionada:", cargoType);
        }
    }
});