import { jsx, jsxs } from 'react/jsx-runtime';
import Icon from '../Icon/Icon.js';
import Tooltip from '../Tooltip/Tooltip.js';
import Typography from '../Typography/Typography.js';

const AttachMedia = ({ mediaSrc, fileId, onExpandClick, onDeleteClick, onDownloadClick, height = '75px', width = '79px', fileName, thumbnailMediaSrc, isDelete, }) => {
    const handleDeleteClick = () => {
        if (onDeleteClick) {
            onDeleteClick(fileId);
        }
    };
    return (jsx("div", { className: "ff-attach-media-container", style: { height, width }, children: jsxs("div", { className: "ff-media-wrapper", style: { height, width }, children: [jsx("img", { src: thumbnailMediaSrc ? thumbnailMediaSrc : mediaSrc, alt: "Attached" }), jsxs("div", { className: "ff-hover-icons", children: [jsxs("div", { className: "ff-top-icons", children: [jsx("div", { className: "ff-icon-container", children: jsx(Tooltip, { title: "Download File", placement: "bottom", children: jsx(Icon, { name: "download_file_icon", height: 10, width: 10, onClick: onDownloadClick, color: "var(--icons-default-color)" }) }) }), isDelete && (jsx("div", { className: "ff-icon-container", children: jsx(Tooltip, { title: "Delete", placement: "bottom", children: jsx(Icon, { name: "delete", height: 10, width: 10, color: "var(--ff-delete-button-attachment)", onClick: handleDeleteClick }) }) }))] }), jsx("div", { className: "ff-expand-icon-container", children: jsx(Tooltip, { title: "Maximize", placement: "bottom", children: jsx(Icon, { name: "expand_icon", height: 16, width: 16, onClick: onExpandClick }) }) })] }), jsx(Typography, { color: "var(--text-area-default-color)", fontWeight: "medium", className: "ff-media-text", children: fileName })] }) }));
};

export { AttachMedia as default };
//# sourceMappingURL=AttachMedia.js.map
