<template>
  <div class="company">
    <p class="logo">
      <img src="/logo.png" alt="Logo" />
    </p>
    <p class="company-item">
      <img class="icon" src="/icons/map.svg" alt="icon-map" />
      <span>{{ companyInfo.address }}</span>
    </p>
    <p class="company-item">
      <img class="icon" src="/icons/phone-call.svg" alt="icon-phone" />
      <span>{{ companyInfo.phone.hotline }}</span>
    </p>
    <p class="company-item">
      <img class="icon" src="/icons/email.svg" alt="icon-email" />
      <span>{{ companyInfo.email.contact }}</span>
    </p>
  </div>
</template>

<script setup>
import { companyInfo } from '~/config/company';
</script>

<style lang="scss">
.company {
  .logo {
    width: 200px;
  }
  .company-item {
    display: flex;
    gap: 10px;
    & + .company-item {
        margin-top: 10px;
    }
    .icon {
      width: 28px;
      height: 28px;
    }
  }
}
</style>
