import React from "react"
import type { Meta, StoryFn } from "@storybook/react-webpack5"
import { Footer, FooterProps } from "./Footer"

export default {
    title: "organisms/Footer",
    component: Footer,
    argTypes: {},
} as Meta<typeof Footer>

const Template: StoryFn<FooterProps> = (args) => {
    return (
        <Footer {...args}>
            <Footer.Heading title={"Information"}>
                <Footer.Link href="#">About us</Footer.Link>
                <Footer.Link href="#">Donors and Partners</Footer.Link>
                <Footer.Link href="#">Privacy and Security</Footer.Link>
                <Footer.Link href="#">Terms of use</Footer.Link>
                <Footer.Link href="#">Contact us</Footer.Link>
            </Footer.Heading>
            <Footer.Heading title={"PDH Tools"}>
                <Footer.Link href="#">Pacific Map</Footer.Link>
                <Footer.Link href="#">PDH.Stat Data Explorer</Footer.Link>
                <Footer.Link href="#">Microdata Library</Footer.Link>
                <Footer.Link href="#">Nexus GeoNode</Footer.Link>
                <Footer.Link href="#">PCCOS Ocean Catalogue</Footer.Link>
            </Footer.Heading>
            <div className="footer-more mb-5 mb-md-0">
                <p>
                    <img className="footer-logo" src="/images/logo_horizontal_white_orange.svg" alt="PDH Logo" />
                </p>
                <p className="mt-4 pt-3 mb-2">Subscribe to PDH updates</p>
                <form id="subForm" className="js-cm-form" data-id="#" action="#" method="post">
                    <div className="mb-3 input-group">
                        <input
                            placeholder="Your email"
                            type="email"
                            id="fieldEmail"
                            className="btn-outline-dark js-cm-email-input form-control"
                            name="email"
                        />
                        <button type="submit" id="button-addon2" className="opacity-undefined btn btn-outline-light">
                            <svg
                                xmlns="http://www.w3.org/2000/svg"
                                viewBox="0 0 16 16"
                                width="16"
                                height="16"
                                fill="currentColor"
                                className="bi bi-envelope-plus"
                            >
                                <path d="M2 2a2 2 0 0 0-2 2v8.01A2 2 0 0 0 2 14h5.5a.5.5 0 0 0 0-1H2a1 1 0 0 1-.966-.741l5.64-3.471L8 9.583l7-4.2V8.5a.5.5 0 0 0 1 0V4a2 2 0 0 0-2-2zm3.708 6.208L1 11.105V5.383zM1 4.217V4a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v.217l-7 4.2z"></path>
                                <path d="M16 12.5a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0m-3.5-2a.5.5 0 0 0-.5.5v1h-1a.5.5 0 0 0 0 1h1v1a.5.5 0 0 0 1 0v-1h1a.5.5 0 0 0 0-1h-1v-1a.5.5 0 0 0-.5-.5"></path>
                            </svg>
                        </button>
                    </div>
                </form>
            </div>
        </Footer>
    )
}

export const _Footer = Template.bind({})
_Footer.args = {
    copyright: "Pacific Data Hub - Copyright 2025 SPC Pacific Community",
}