import css from '../../styles/Pizza.module.css'
import Layout from '../../components/Layout'
import { client, urlFor } from '../../lib/client';
import Image from 'next/image'



export default function Pizza( pizza ) { 
    const src = urlFor(pizza.image).url()  
    return (
        <Layout>
            <div className={css.container}>
                <div className={css.imageWrapper}>
                    <Image 
                    loader={()=> src}
                    alt=''
                    src={src} layout='fill' unoptimized objectFit='cover'/>
                </div>
            </div>
        </Layout>
    );
}

export async function getStaticPaths() {
    const paths = await client.fetch(
        `*[_type=="pizza" && defined(slug.current)][].slug.current`
    );

    return {
        paths: paths.map((slug)=> ({params: {slug}})),
        fallback: 'blocking',
    }
}

export async function getStaticProps(context) {
    const {slug = ""} = context.params;
    const pizza = await client.fetch(
        `*[_type=="pizza" && slug.current == ${slug}][0]`
    );
    return {
        props: {
            pizza,
        },
    };
}

import sanityClient from '@sanity/client';
import ImageUrlBuilder from '@sanity/image-url';
export const client = sanityClient({
    projectId: 'fzrtqgg5',
    dataset: 'production',
    apiVersion: "2022-08-26",
    useCdn: true,
    token: 
    "skbb3liMqr3eQniDCvA0XzPQjjCqx4q0DgEbi2FeqhGcT6SjVfT9krLhV4KAELgyJxnaifSxITf1j9gJUZ4W1fSCONMVehDiL5Gd6wNVyx4uqnKghGh6zsEtoNUWxMqsztb3CidyRBbwR99p8XlIPYg3SgtDsTAf412OCDngizvLkFbqFsNE"
})

const builder = ImageUrlBuilder(client);

export const urlFor = (source) => builder.image(source)