<script lang="ts">
	// make dynamic date to be added to footer
	let date = new Date().getFullYear();
	export let logo_url: string = '/images/logo.png';
	export let address: string = 'ใส่ที่อยู่ที่นี้';
	export let title: string = 'ใส่องค์กรที่นี้';
	export let divisions: { title: string; url: string }[] = [];
	export let institutes: { title: string; url: string }[] = [];
</script>

<footer class="relative bg-blueGray-200 pt-8 pb-6">
	<div
		class="bottom-auto top-0 left-0 right-0 w-full absolute pointer-events-none overflow-hidden -mt-20 h-20"
		style="transform: translateZ(0);"
	>
		<svg
			class="absolute bottom-0 overflow-hidden"
			xmlns="http://www.w3.org/2000/svg"
			preserveAspectRatio="none"
			version="1.1"
			viewBox="0 0 2560 100"
			x="0"
			y="0"
		>
			<polygon class="text-blueGray-200 fill-current" points="2560 0 2560 100 0 100" />
		</svg>
	</div>
	<div class="container mx-auto px-4">
		<div class="flex flex-wrap text-center lg:text-left">
			<div class="w-full lg:w-6/12 px-4">
				<div class="mb-4 flex flex-wrap justify-center lg:justify-start">
					<div class="w-12 rounded-full">
						<img src={logo_url ? logo_url : '/images/logo.png'} alt="logo" />
					</div>
				</div>
				<h5 class="text-2xl font-semibold">{title}</h5>
				<h6 class="text-md mt-1 mb-2 text-blueGray-600">
					{address}
				</h6>
				<div class="mt-6 lg:mb-0 mb-6">
					<!-- <button
            class="bg-white text-lightBlue-600 shadow-lg font-normal h-10 w-10 items-center justify-center align-center rounded-full outline-none focus:outline-none mr-2"
            type="button"
          >
            <i class="fab fa-facebook-square"></i>
          </button>
          <button
            class="bg-white text-pink-400 shadow-lg font-normal h-10 w-10 items-center justify-center align-center rounded-full outline-none focus:outline-none mr-2"
            type="button"
          >
            <i class="fab fa-dribbble"></i>
          </button> -->
				</div>
			</div>
			<div class="w-full lg:w-6/12 px-4">
				<div class="flex flex-wrap items-top mb-6">
					{#if institutes.length > 0}
						<div class="w-full lg:w-4/12 px-4 ml-auto">
							<span class="block uppercase text-blueGray-500 text-sm font-semibold mb-2">
								ส่วนราชการ
							</span>
							<ul class="list-none">
								{#each institutes as d}
									<li>
										<a
											class="text-blueGray-600 hover:text-blueGray-800 font-semibold block pb-2 text-sm"
											href={d.url}
											target="_blank"
										>
											{d.title}
										</a>
									</li>
								{/each}
							</ul>
						</div>
					{/if}
					{#if divisions.length > 0}
						<div class="w-full lg:w-4/12 px-4">
							<span class="block uppercase text-blueGray-500 text-sm font-semibold mb-2">
								หน่วยงาน
							</span>
							<ul class="list-none">
								{#each divisions as i}
									<li>
										<a
											class="text-blueGray-600 hover:text-blueGray-800 font-semibold block pb-2 text-sm"
											href={i.url}
											target="_blank"
										>
											{i.title}
										</a>
									</li>
								{/each}
							</ul>
						</div>
					{/if}
				</div>
			</div>
		</div>
		<hr class="my-6 border-blueGray-300" />
		<div class="flex flex-wrap items-center md:justify-between justify-center">
			<div class="w-full md:w-4/12 px-4 mx-auto text-center">
				<div class="text-sm text-blueGray-500 font-semibold py-1">
					Copyright © {date} bangkok.go.th/ksb All rights reserved.
				</div>
			</div>
		</div>
	</div>
</footer>
