import React, { Fragment } from 'react'
import { useQuery } from 'react-query'
import { getProductCategoryBreadcrumb } from '~/services/product'
import Link from 'next/link'
import { createSlug } from '~/libs/slug'

type Props = {
  id: number,
  name: string
}

const Breadcrumb = ({ id, name }: Props) => {
  const query = useQuery({
    queryKey: ['product-category-breadcrumb'],
    queryFn: () => getProductCategoryBreadcrumb(id),
    refetchOnWindowFocus: false
  })

  const breadcrumbs = query.data || []

  return (
    <div className='line-clamp-2 md:line-clamp-1 leading-7 text-caption-1'>
      <Link href='/' className='text-danger-500'>Home</Link>
      <span className='mx-2'>/</span>
      {breadcrumbs.map((category, index) => (
        <Fragment key={index}>
          <Link
            href={createSlug('/shop/category/', category.name, category.id.toString())}
            className='text-danger-500'
          >
            {category.name}
          </Link>
          <span className='mx-2'>/</span>
        </Fragment>
      ))}
      <span>{name}</span>
    </div>
  )
}

export default Breadcrumb