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

  export let company_data: company;

  
  let company_name: string = '';
  let tel_number: string = '';

  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["company_name"];
      tel_number = company_data["company_phone_number"];
    }
  });
</script>

<title>Delivery towns and Map</title>

<div class="bg-secondary px-10">
    <div class="max-w-7xl justify-center py-5 mx-auto font-bold  text-white">
      <h1>Delivery Area</h1>
    </div>
</div>

<div class="h-auto">
    <div class="mx-auto p-5">
        <div class="grid grid-cols-12 ">
            <div class="col-span-12 py-5 ">
                <div class="font-bold text-secondary mx-auto text-center md:text-left">
                    <h3>Serving these communites</h3>
                </div>
                <div class="font-bold text-xl bg-secondary text-primary h-10 mb-10">

                </div>
            </div>
            <div class="col-span-12 py-5 ">
                <div class="invisible md:visible h-0 md:h-auto  flex gap-20 justify-center text-3xl">
                  <div >
                    <div class="text-2xl">Auburn</div>
                    <div class="text-2xl">Millbury</div>
                    <div class="text-2xl">Oxford</div>
                    <div class="text-2xl">North Oxford</div>
                    <div class="text-2xl">Webster</div>
                    <div class="text-2xl">Southbridge</div>
                    <div class="text-2xl">Grafton</div>
                  </div>
                  <div >
                    <div class="text-2xl">Dudley</div>
                    <div class="text-2xl">Sutton</div>
                    <div class="text-2xl">Charlton</div>
                    <div class="text-2xl">Leicester</div>
                    <div class="text-2xl">Cherry Valley</div>
                    <div class="text-2xl">Rochdale</div>
                    <div class="text-2xl">Spencer</div>
                    <div class="text-2xl">Worcester</div>
                  </div>
                    </div>
                    <div class="visible sm:visible md:invisible h-auto sm:h-auto md:h-0">
                      <div class="text-center">
                        <div class="text-2xl">Auburn</div>
                        <div class="text-2xl">Millbury</div>
                        <div class="text-2xl">Oxford</div>
                        <div class="text-2xl">North Oxford</div>
                        <div class="text-2xl">Webster</div>
                        <div class="text-2xl">Grafton</div>
                        <div class="text-2xl">Dudley</div>
                        <div class="text-2xl">Charlton</div>
                        <div class="text-2xl">Leicester</div>
                        <div class="text-2xl">Cherry Valley</div>
                        <div class="text-2xl">Rochdale</div>
                        <div class="text-2xl">Spencer</div>
                        <div class="text-2xl">Sutton</div>
                        <div class="text-2xl">Southbridge</div>
                        <div class="text-2xl">Worcester</div>
                      </div>
                    </div>
            </div>
            <div class="col-span-12 py-5 ">
                <div class="flex justify-center items-center md:h-auto">
                    <img class="" src="/images/area.png" alt="Worcester County oil delivery">
                </div>
            </div>
        </div>
    </div>
</div>