'use client'

import { suitableApi } from '@/api/suitable'
import { useQuery } from '@tanstack/react-query'

export default function Suitable() {
  const { data, error, isPending } = useQuery({
    queryKey: ['suitable-list'],
    queryFn: suitableApi.getList,
  })

  return (
    <>
      <h1 className="text-4xl font-bold">Suitable</h1>
      {error && <div>Error: {error.message}</div>}
      {isPending && <div>Loading...</div>}
      {data && data.map((item) => <div key={item.id}>{item.product_name}</div>)}
    </>
  )
}