import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import './AttachMedia.scss';
import Icon from '../Icon/Icon';
import Tooltip from '../Tooltip';
import Typography from '../Typography';
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 default AttachMedia;
//# sourceMappingURL=AttachMedia.js.map