<script setup>
    import { RouterLink } from 'vue-router';
    import { getDateMonthDay } from '../helpers/date_formats';
    import { useI18n } from 'vue-i18n';

    defineProps({
        company: {
            type: Object,
            required: true,
        }
    });

    const { t } = useI18n()
</script>

<template>
    <div class="card-fixed flex-column">
        <h2>{{ company.company_name }}</h2>
        <div class="divider"></div>
        <div class="row mt-4">
            <div class="col-lg-6 col-sm-12">
                <!-- <p><span>RFC:</span> {{ company.rfc }}</p> -->
                <!-- <p><span>Tipo de empresa:</span> {{ company.company_type || 'No definido' }}</p> -->
                <p><span>{{ t('labels.codeId') }}:</span> {{ company.company_code }}</p>
                <p><span>{{ t('labels.dateMembership') }}: </span>{{getDateMonthDay(company.createdAt)}}</p>
                <p><span>{{ t('company.segment') }}:</span> {{ company._categories }}</p>
                <!-- <p><span>Afiliación: </span>  {{company.membership}}</p> -->
            </div>
            <div class="col-lg-6 col-sm-12">
                <p><span>{{ t('labels.locationLoadState') }}: </span>{{company._company_state}}</p>
                <p><span>{{ t('labels.locationLoadCity') }}: </span>{{company._company_city}}</p>
                <p><span>{{ t('labels.truckUsed') }}: </span>{{company._truck_types}}</p>
                <p><span>{{ t('labels.infoCompany') }}: </span>{{company.company_description}}</p>
            </div>
        </div>
        <div class="d-flex justify-content-end">
            <RouterLink 
                class="btn-primary-sm"
                :to="{name: 'public-users', params: {id: company._id}}"
            >{{ t('buttons.profile') }}</RouterLink>
        </div>
    </div>
</template>

<style scoped>

    h2{
        font-size: 1.5rem;
        font-weight: 800;
        color: #323030;
    }

    p {
        font-size: 1rem;
        font-weight: 400;
        color: #323032;
    }

    p span {
        font-weight: 700;
    }

    @media (max-width: 768px) {
        h2{
            font-size: 1.1rem;
            font-weight: 600;
            color: #323030;
        }


        p {
            font-size: 0.9rem;
            font-weight: 400;
            color: #323032;
        }
        p span {
            font-weight: 700;
        }
    }
</style>