import Page from 'components/layout/Page';
import { useApi } from 'components/hooks';
import WebsitesTable from 'app/(main)/settings/websites/WebsitesTable';
import { useFilterQuery } from 'components/hooks';
import DataTable from 'components/common/DataTable';

export function UserWebsites({ userId }) {
  const { get } = useApi();
  const queryResult = useFilterQuery({
    queryKey: ['user:websites', userId],
    queryFn: (params: any) => get(`/users/${userId}/websites`, params),
  });
  const hasData = queryResult.result && queryResult.result.data.length !== 0;

  return (
    <Page isLoading={queryResult.query.isLoading} error={queryResult.query.error}>
      {hasData && (
        <DataTable queryResult={queryResult}>
          {({ data }) => (
            <WebsitesTable data={data} showActions={true} allowEdit={true} allowView={true} />
          )}
        </DataTable>
      )}
    </Page>
  );
}

export default UserWebsites;