import React from 'react';
import { ReactComponent as User } from '../../../assets/images/icons/user-svgrepo-com.svg';
import { ReactComponent as DropDown } from '../../../assets/images/icons/Dropdown.svg';
import { ReactComponent as Date } from '../../../assets/images/icons/date-svgrepo-com.svg';
import { ReactComponent as Time } from '../../../assets/images/icons/time-svgrepo-com.svg';
import { ReactComponent as FileUpload } from '../../../assets/images/icons/file-upload-svgrepo-com.svg';
import { ReactComponent as EyeSlash } from '../../../assets/images/icons/eye-slash-fill-svgrepo-com.svg';
import { ReactComponent as EyeView } from '../../../assets/images/icons/eye-svgrepo-com.svg';
import { ReactComponent as Close } from '../../../assets/images/icons/close-o-svgrepo-com.svg';
import { ReactComponent as Check } from '../../../assets/images/icons/check-o-svgrepo-com.svg';
import { ReactComponent as Success } from '../../../assets/images/icons/thumb-up-svgrepo-com.svg';
import { ReactComponent as Info } from '../../../assets/images/icons/info-svgrepo-com.svg';
import { ReactComponent as Warning } from '../../../assets/images/icons/warning-svgrepo-com.svg';
import { ReactComponent as Danger } from '../../../assets/images/icons/not-allowed-svgrepo-com.svg';
import { ReactComponent as RightLine } from '../../../assets/images/icons/right-arrow-line.svg';
import { ReactComponent as RightFill } from '../../../assets/images/icons/right-arrow-fill.svg';
import { ReactComponent as LeftArrow } from '../../../assets/images/icons/left-arrow.svg';
import { ReactComponent as LeftArrowLine } from '../../../assets/images/icons/left-arrow-line.svg';
import { ReactComponent as LeftArrowLong } from '../../../assets/images/icons/left-arrow-long.svg';
import { ReactComponent as MailSolid } from '../../../assets/images/icons/icon-solid-mail.svg';
import { ReactComponent as MailOutline } from '../../../assets/images/icons/icon-outline-mail.svg';
import { ReactComponent as BellSolid } from '../../../assets/images/icons/icon-solid-bell.svg';
import { ReactComponent as BellOutline } from '../../../assets/images/icons/icon-outline-bell.svg';
import { ReactComponent as SettingSolid } from '../../../assets/images/icons/icon-solid-settings.svg';
import { ReactComponent as SettingOutline } from '../../../assets/images/icons/icon-outline-settings.svg';
import { ReactComponent as PersonSolid } from '../../../assets/images/icons/icon-solid-person.svg';
import { ReactComponent as PersonOutline } from '../../../assets/images/icons/icon-outline-person.svg';
import { ReactComponent as EditSolid } from '../../../assets/images/icons/icon-solid-edit.svg';
import { ReactComponent as EditOutline } from '../../../assets/images/icons/icon-outline-edit.svg';
import { ReactComponent as BookmarkSolid } from '../../../assets/images/icons/icon-solid-bookmark.svg';
import { ReactComponent as BookmarkOutline } from '../../../assets/images/icons/icon-outline-bookmark.svg';
import { ReactComponent as EyeviewSolid } from '../../../assets/images/icons/icon-solid-eyeview.svg';
import { ReactComponent as EyeviewOutline } from '../../../assets/images/icons/icon-outline-eyeview.svg';
import { ReactComponent as EyeslashSolid } from '../../../assets/images/icons/icon-solid-eyeslash.svg';
import { ReactComponent as EyeslashOutline } from '../../../assets/images/icons/icon-outline-eyeslash.svg';
import { ReactComponent as ClockSolid } from '../../../assets/images/icons/icon-solid-clock.svg';
import { ReactComponent as ClockOutline } from '../../../assets/images/icons/icon-outline-clock.svg';
import { ReactComponent as GallarySolid } from '../../../assets/images/icons/icon-solid-gallary.svg';
import { ReactComponent as GallaryOutline } from '../../../assets/images/icons/icon-outline-gallary.svg';
import { ReactComponent as PhoneSolid } from '../../../assets/images/icons/icon-solid-phone.svg';
import { ReactComponent as PhoneOutline } from '../../../assets/images/icons/icon-outline-phone.svg';
import { ReactComponent as MenuSolid } from '../../../assets/images/icons/icon-solid-menu.svg';
import { ReactComponent as MenuOutline } from '../../../assets/images/icons/icon-outline-menu.svg';
import { ReactComponent as CloseSolid } from '../../../assets/images/icons/icon-solid-close.svg';
import { ReactComponent as CloseOutline } from '../../../assets/images/icons/icon-outline-close.svg';
import { ReactComponent as AddSolid } from '../../../assets/images/icons/icon-solid-add.svg';
import { ReactComponent as AddOutline } from '../../../assets/images/icons/icon-outline-add.svg';
import { ReactComponent as QuestionSolid } from '../../../assets/images/icons/icon-solid-question.svg';
import { ReactComponent as QuestionOutline } from '../../../assets/images/icons/icon-outline-question.svg';
import { ReactComponent as ShareSolid } from '../../../assets/images/icons/icon-solid-share.svg';
import { ReactComponent as ShareOutline } from '../../../assets/images/icons/icon-outline-share.svg';
import { ReactComponent as HeartSolid } from '../../../assets/images/icons/icon-solid-heart.svg';
import { ReactComponent as HeartOutline } from '../../../assets/images/icons/icon-outline-heart.svg';
import { ReactComponent as VolumeoffSolid } from '../../../assets/images/icons/icon-solid-volumeoff.svg';
import { ReactComponent as VolumeoffOutline } from '../../../assets/images/icons/icon-outline-volumeoff.svg';
import { ReactComponent as FilterSolid } from '../../../assets/images/icons/icon-solid-filter.svg';
import { ReactComponent as FilterOutline } from '../../../assets/images/icons/icon-outline-filter.svg';
import { ReactComponent as LinkSolid } from '../../../assets/images/icons/icon-solid-link.svg';
import { ReactComponent as LinkOutline } from '../../../assets/images/icons/icon-outline-link.svg';
import { ReactComponent as LockSolid } from '../../../assets/images/icons/icon-solid-lock.svg';
import { ReactComponent as LockOutline } from '../../../assets/images/icons/icon-outline-lock.svg';

import { ReactComponent as TopArrow } from '../../../assets/images/icons/top-arrow.svg';
import { ReactComponent as CircleChecked } from '../../../assets/images/icons/circle-checked.svg';
import { ReactComponent as RightDoubleArrow } from '../../../assets/images/icons/double-arrow-right.svg';
import { ReactComponent as LeftDoubleArrow } from '../../../assets/images/icons/double-arrow-left.svg';
import { ReactComponent as PaginationRightArrow } from '../../../assets/images/icons/pagination-right-arrow.svg';
import { ReactComponent as PaginationLeftArrow } from '../../../assets/images/icons/pagination-left-arrow.svg';

type ReactSVGComponent = React.FunctionComponent<
  React.SVGProps<SVGSVGElement> & { title?: string }
>;

type IconComponentProps = { name: string, addClass?: string};
type IconTypes = { [name: string]: any };

const iconTypes:IconTypes = {
    person: User,
    dropDown:DropDown,
    date:Date,
    time:Time,
    fileUpload:FileUpload,
    eyeSlash:EyeSlash,
    eyeView:EyeView,
    close: Close,
    check: Check,
    success: Success,
    info: Info,
    warning: Warning,
    danger: Danger,
    rightLine: RightLine,
    rightFill: RightFill,
    leftArrow: LeftArrow,
    leftArrowLine: LeftArrowLine,
    leftArrowLong:LeftArrowLong,
    mailSolid: MailSolid,
    mailOutline: MailOutline,
    bellSolid: BellSolid,
    bellOutline: BellOutline,
    settingSolid: SettingSolid,
    settingOutline: SettingOutline,
    personSolid: PersonSolid,
    personOutline: PersonOutline,
    editSolid: EditSolid,
    editOutline: EditOutline,
    bookmarkSolid: BookmarkSolid,
    bookmarkOutline: BookmarkOutline,
    eyeviewSolid: EyeviewSolid,
    eyeviewOutline: EyeviewOutline,
    eyeslashSolid: EyeslashSolid,
    eyeslashOutline: EyeslashOutline,
    clockSolid: ClockSolid,
    clockOutline: ClockOutline,
    gallarySolid: GallarySolid,
    gallaryOutline: GallaryOutline,
    phoneSolid: PhoneSolid,
    phoneOutline: PhoneOutline,
    menuSolid: MenuSolid,
    menuOutline: MenuOutline,
    closeSolid: CloseSolid,
    closeOutline: CloseOutline,
    addSolid: AddSolid,
    addOutline: AddOutline,
    questionSolid: QuestionSolid,
    questionOutline: QuestionOutline,
    shareSolid: ShareSolid,
    shareOutline: ShareOutline,
    heartSolid: HeartSolid,
    heartOutline: HeartOutline,
    volumeoffSolid: VolumeoffSolid,
    volumeoffOutline: VolumeoffOutline,
    filterSolid: FilterSolid,
    filterOutline: FilterOutline,
    linkSolid: LinkSolid,
    linkOutline: LinkOutline,
    lockSolid: LockSolid,
    lockOutline: LockOutline,
    topArrow: TopArrow,
    circleChecked: CircleChecked,
    rightDoubleArrow: RightDoubleArrow,
    leftDoubleArrow: LeftDoubleArrow,
    paginationRightArrow: PaginationRightArrow,
    paginationLeftArrow: PaginationLeftArrow,
};





const  IconComponent = ({ name,addClass, ...props }:IconComponentProps) => {
    const Icons = iconTypes[name];
    return (
      <div className={`icon-view ${addClass ? addClass : ''}`}>
       {Icons && <Icons {...props}/>}
      </div>
    )

};

export default IconComponent;