import React from "react";

import {

EuiDescriptionList,

EuiDescriptionListDescription,

EuiDescriptionListTitle,

} from "@elastic/eui";

import EuiCustomLink from "./EuiCustomLink";

interface TagsDisplayProps {

createLink?: (key: string, value: string) => string;

tags: Record<string, string>;

owner?: string;

description?: string;

}

const TagsDisplay = ({

tags,

createLink,

owner,

description,

}: TagsDisplayProps) => {

return (

<EuiDescriptionList textStyle="reverse">

{owner ? (

<React.Fragment key={"owner"}>

<EuiDescriptionListTitle>owner</EuiDescriptionListTitle>

<EuiDescriptionListDescription>{owner}</EuiDescriptionListDescription>

</React.Fragment>

) : (

""

)}

{description ? (

<React.Fragment key={"description"}>

<EuiDescriptionListTitle>description</EuiDescriptionListTitle>

<EuiDescriptionListDescription>

{description}

</EuiDescriptionListDescription>

</React.Fragment>

) : (

""

)}

{Object.entries(tags).map(([key, value]) => {

return (

<React.Fragment key={key}>

<EuiDescriptionListTitle>{key}</EuiDescriptionListTitle>

<EuiDescriptionListDescription>

{createLink ? (

<EuiCustomLink to={createLink(key, value)}>

{value}

</EuiCustomLink>

) : (

value

)}

</EuiDescriptionListDescription>

</React.Fragment>

);

})}

</EuiDescriptionList>

);

};

export default TagsDisplay;