import type { SortFilterItem } from '@/lib/constants'

import React, { Suspense } from 'react'

import { FilterItem } from './FilterItem'
export type ListItem = PathFilterItem | SortFilterItem
export type PathFilterItem = { path: string; title: string }

function FilterItemList({ list }: { list: ListItem[] }) {
  return (
    <React.Fragment>
      {list.map((item: ListItem, i) => (
        <FilterItem item={item} key={i} />
      ))}
    </React.Fragment>
  )
}

export function FilterList({ list, title }: { list: ListItem[]; title?: string }) {
  return (
    <React.Fragment>
      <nav className="border-t border-[#dbe8d7] pt-5">
        {title ? (
          <h3 className="mb-3 text-[11px] font-semibold uppercase tracking-[0.18em] text-[#607668]">
            {title}
          </h3>
        ) : null}
        <ul className="grid grid-cols-2 gap-2">
          <Suspense fallback={null}>
            <FilterItemList list={list} />
          </Suspense>
        </ul>
      </nav>
    </React.Fragment>
  )
}