<template>
    <div class="layout-px-spacing">
        <div class="row layout-top-spacing">
            <div class="col-xl-12 layout-spacing">
                <div class="panel p-5 text-center">
                    <svg xmlns="http://www.w3.org/2000/svg" width="72" height="72" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" class="text-primary mb-3">
                        <path d="M4 14c2-3 5-4 8-4s6 1 8 4"></path>
                        <circle cx="8" cy="9" r="1.5"></circle>
                        <circle cx="16" cy="9" r="1.5"></circle>
                        <path d="M3 20h18"></path>
                    </svg>
                    <h2>Control Ganadero</h2>
                    <p class="lead text-muted mb-4">
                        Inventario, pesajes, engorda y balance financiero de tu rancho.
                    </p>
                    <div class="d-flex flex-wrap justify-content-center gap-2">
                        <router-link v-if="can('ranch.dashboard')" to="/ganaderia/dashboard" class="btn btn-primary">Panel</router-link>
                        <router-link v-if="can('ranch.cattle.manage')" to="/ganaderia/animales" class="btn btn-outline-primary">Ganado</router-link>
                        <router-link v-if="can('ranch.weight.record')" to="/ganaderia/pesajes" class="btn btn-outline-primary">Pesajes</router-link>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { usePermissions } from '@/composables/use-permissions';
const { can } = usePermissions();
</script>
