<script lang="ts">
  import "../../app.postcss";
  import { onMount } from "svelte";
  import { PUBLIC_BASE_URL } from "$env/static/public";
  import  type { company, oilprice } from '$lib/types/types'

  export let company_data: company;
  export let oil_price_data: oilprice;
  
  let price_of_oil: string = '';
  let company_name: string = '';
  let tel_number: string = '';

  onMount(async () => {
    await fetch(PUBLIC_BASE_URL + "/info/price/oil", {
      method: "get",
      credentials: "include",
      headers: {
        "Content-Type": "application/json",
      },
    })
      .then((response) => response.json())
      .then((result) => (oil_price_data = result));

    if (oil_price_data["ok"] == true) {
      price_of_oil = oil_price_data["price"];
    }
  });
  onMount(async () => {
    await fetch(PUBLIC_BASE_URL + "/info/company", {
      method: "get",
      credentials: "include",
      headers: {
        "Content-Type": "application/json",
      },
    })
      .then((response) => response.json())
      .then((result) => (company_data = result));

    if (company_data["ok"] == true) {
      company_name = company_data["name"];
      tel_number = company_data["telephone"];
    }
  });
</script>

<div class="bg-secondary px-10">
  <div
    class="max-w-7xl justify-center py-5 mx-auto font-bold text-2xl text-white"
  >
    Contact
  </div>
</div>
<div class="max-w-7xl mx-auto px-10">
  <div class="grid grid-cols-2">
    <div class="col-span-1 p-5">
      <div class="text-2xl font-bold text-primary">Contact Good Oil</div>
      <div class="mb-20 text-xl">Phone: {tel_number}</div>

      <div class="mb-10">
        <div class="font-bold text-2xl text-primary max-w-7xl mx-auto">
          Business Hours Summer
        </div>
        <div class="font-bold text-xl bg-primary text-white h-2 mb-2"></div>
        <div class="text-xl">Monday: 8:00 a.m. – 5:00 p.m.</div>
        <div class="text-xl">Tuesday: 8:30 a.m. – 5:00 p.m.</div>
        <div class="text-xl">Wednesday: 8:30 a.m. – 5:00 p.m.</div>
        <div class="text-xl">Thursday: 8:00 a.m. – 5:00 p.m.</div>
        <div class="text-xl">Friday: 8:00 a.m. – 3:00 p.m.</div>
        <div class="text-xl">Saturday: Closed</div>
        <div class="text-xl">Sunday: Closed</div>
      </div>
      <div class="">
        <div class="font-bold text-2xl text-primary max-w-7xl mx-auto">
          Business Hours Winter
        </div>
        <div class="font-bold text-xl bg-primary text-white h-2 mb-2"></div>
        <div class="text-xl">Monday: 8:00 a.m. – 5:00 p.m.</div>
        <div class="text-xl">Tuesday: 8:30 a.m. – 5:00 p.m.</div>
        <div class="text-xl">Wednesday: 8:30 a.m. – 5:00 p.m.</div>
        <div class="text-xl">Thursday: 8:00 a.m. – 5:00 p.m.</div>
        <div class="text-xl">Friday: 8:00 a.m. – 5:00 p.m.</div>
        <div class="text-xl">Saturday: 8:00 a.m. – 1:00 p.m.</div>
        <div class="text-xl">Sunday: Closed</div>
      </div>
    </div>
    <div class="col-span-1">
      <img class="  w-auto" src="/images/contact.png" alt="" />
    </div>
  </div>
</div>
