import React, { ReactElement } from "react";
import { Content } from "@onegeo/gatsby-theme-onegeo";
import { Socials } from "@onegeo/gatsby-theme-onegeo";
import { graphql, Link, PageProps } from "gatsby";

type Logo = {
  id: string;
};

type Data = {
  directus: {
    partners: [id: string, name: string, logo: Logo];
  };
};

const socials = ({ data }: PageProps<Data>): ReactElement => {
  const dataList = data.directus.partners;

  return (
    <Content>
      <div className="prose">
        <Link to="/doc">Retour</Link>

        <h1>List resaux sociaux</h1>
        <h2>Props</h2>
        <div className="mockup-code">
          <pre>
            <code>
              {`
              interface ISocials {
                logo?: any,
                name?: string,
                url?: string,
                layout?:string
              }


            query {
              directus {
                partners(filter: {type: {_eq: "sociaux"}}) {
                  id
                  name
                  url
                  type
                  logo {
                    id
                  }
                }
              }
            }
              `}
            </code>
          </pre>
        </div>

        <h2>Example</h2>
      </div>
      <h2>reseaux sociaux</h2>
      <div className="flex gap-2 m-4">
        {dataList.map((item: any) => {
          return (
            <div key={item.id}>
              <Socials
                name={item.name}
                url={item.url}
                logo={`${process.env.DIRECTUS_URL}assets/${item.logo.id}`}
                layout="row"
              />
            </div>
          );
        })}
      </div>

      <h2>reseaux sociaux</h2>
      <div className="flex flex-col gap-2 m-4">
        {dataList.map((item: any) => {
          return (
            <div key={item.id}>
              <Socials
                name={item.name}
                url={item.url}
                logo={`${process.env.DIRECTUS_URL}assets/${item.logo.id}`}
                layout="col"
              />
            </div>
          );
        })}
      </div>
      {/* <div className="flex gap-6 m-4">
        <Socials dataList={dataList} layout="col" />
      </div> */}
    </Content>
  );
};

export default socials;

export const query = graphql`
  query {
    directus {
      partners {
        id
        name
        url
        logo {
          id
        }
      }
    }
  }
`;