// components/ContentFileNames.tsx

import React, { useEffect, useState } from 'react';

import { Cards, Card } from 'nextra-theme-docs';

import { FilesIcon } from './icons';

const ContentFileNames = ({ section = 'research', lang = 'en' }) => {

const [fileNames, setFileNames] = useState([]);

useEffect(() => {

fetch(`/api/contentFiles?section=${section}&lang=${lang}`)

.then(response => response.json())

.then(data => setFileNames(data.fileNames));

}, [section, lang]);

return (

<Cards>

{fileNames.map(({ slug, title }, index) => (

<React.Fragment key={index}>

<Card

icon={<FilesIcon />}

title={title}

href={`/${section}/${slug}`}

children={<></>}

/>

</React.Fragment>

))}

</Cards>

);

};

export default ContentFileNames;