const svg1=<svg className="card-custom-icon header-icon" xmlns="http://www.w3.org/2000/svg"
height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none" />
<path
  d="M5 8v12h14V8H5zm7 6c-2.76 0-5-2.24-5-5h2c0 1.66 1.34 3 3 3s3-1.34 3-3h2c0 2.76-2.24 5-5 5z"
  opacity=".3" />
<path
  d="M17 6c0-2.76-2.24-5-5-5S7 3.24 7 6H5c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-2zm-5-3c1.66 0 3 1.34 3 3H9c0-1.66 1.34-3 3-3zm7 17H5V8h14v12zm-7-8c-1.66 0-3-1.34-3-3H7c0 2.76 2.24 5 5 5s5-2.24 5-5h-2c0 1.66-1.34 3-3 3z" />
</svg>
const svg2=<svg className="card-custom-icon header-icon" xmlns="http://www.w3.org/2000/svg"
height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none" />
<path
  d="M3.31 11l2.2 8.01L18.5 19l2.2-8H3.31zM12 17c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"
  opacity=".3" />
<path
  d="M22 9h-4.79l-4.38-6.56c-.19-.28-.51-.42-.83-.42s-.64.14-.83.43L6.79 9H2c-.55 0-1 .45-1 1 0 .09.01.18.04.27l2.54 9.27c.23.84 1 1.46 1.92 1.46h13c.92 0 1.69-.62 1.93-1.46l2.54-9.27L23 10c0-.55-.45-1-1-1zM12 4.8L14.8 9H9.2L12 4.8zM18.5 19l-12.99.01L3.31 11H20.7l-2.2 8zM12 13c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" />
</svg>
const svg3=<svg className="card-custom-icon header-icon" xmlns="http://www.w3.org/2000/svg"
height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none" />
<path
  d="M11.99 18.54l-7.37-5.73L3 14.07l9 7 9-7-1.63-1.27zM12 16l7.36-5.73L21 9l-9-7-9 7 1.63 1.27L12 16zm0-11.47L17.74 9 12 13.47 6.26 9 12 4.53z" />
</svg>
const svg4= <svg className="card-custom-icon header-icon" xmlns="http://www.w3.org/2000/svg"
height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none" />
<path
  d="M12 4c-4.42 0-8 3.58-8 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm4.25 12.15L11 13V7h1.5v5.25l4.5 2.67-.75 1.23z"
  opacity=".3" />
<path
  d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z" />
</svg>
const svg5=<svg className="card-custom-icon" xmlns="http://www.w3.org/2000/svg"
enableBackground="new 0 0 24 24" viewBox="0 0 24 24">
<path fill="#b2b1ff" d="M13,17H9c-2.8,0-5-2.2-5-5V4c0-0.6,0.4-1,1-1c0,0,0,0,0,0h12c0.6,0,1,0.4,1,1c0,0,0,0,0,0v8
C18,14.8,15.8,17,13,17z" />
<path fill="#6563ff"
  d="M18 7h1c.6 0 1 .4 1 1s-.4 1-1 1h-1v2h1c1.7 0 3-1.3 3-3s-1.3-3-3-3h-1V7zM21 19H3c-.6 0-1 .4-1 1s.4 1 1 1h18c.6 0 1-.4 1-1S21.6 19 21 19z" />
</svg>
const svg6=  <svg className="card-custom-icon" xmlns="http://www.w3.org/2000/svg"
enableBackground="new 0 0 24 24" viewBox="0 0 24 24">
<path fill="#b2b1ff" d="M22,10H1.99976v9c0,1.65685,1.34315,3,3,3l0,0h14.00048c1.65685,0,3-1.34315,3-3L22,10z M7,8
C6.44772,8,6,7.55228,6,7V3c0-0.55228,0.44772-1,1-1s1,0.44772,1,1v4C8,7.55228,7.55228,8,7,8z M17,8c-0.55228,0-1-0.44772-1-1V3
c0-0.55228,0.44772-1,1-1s1,0.44772,1,1v4C18,7.55228,17.55228,8,17,8z"/>
<path fill="#6563ff" d="M19,4h-1v3c0,0.55228-0.44772,1-1,1s-1-0.44772-1-1V4H8v3c0,0.55228-0.44772,1-1,1S6,7.55228,6,7V4H4.99951
c-1.65685,0-3,1.34315-3,3v3H22V7C22,5.34315,20.65685,4,19,4z"/>
</svg>
const svg7=  <svg className="card-custom-icon" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24">
<path fill="#6563ff"
  d="M12,2A10.01687,10.01687,0,0,0,5,4.87714V3A1,1,0,0,0,3,3V7.5a.99974.99974,0,0,0,1,1H8.5a1,1,0,0,0,0-2H6.21844A7.99161,7.99161,0,1,1,12,20a1,1,0,0,0,0,2A10,10,0,0,0,12,2Z" />
<path fill="#6563ff"
  d="M14,13H12a.99974.99974,0,0,1-1-1V9a1,1,0,0,1,2,0v2h1a1,1,0,0,1,0,2Z"/>
<path fill="#b2b1ff"
  d="M12,4A8.00807,8.00807,0,0,0,6.21844,6.5H8.5a1,1,0,0,1,0,2H4a.98882.98882,0,0,1-.97583-.88013A9.977,9.977,0,0,0,12,22a1,1,0,0,1,0-2A8,8,0,0,0,12,4Zm2,9H12a.99974.99974,0,0,1-1-1V9a1,1,0,0,1,2,0v2h1a1,1,0,0,1,0,2Z" />
</svg>
const svg8=   <svg className="svg-icon2  fill-white text-primary icon-dropshadow-primary" x="0"
y="240" viewBox="0 0 24 24" height="100%" width="100%"
preserveAspectRatio="xMidYMid meet" focusable="false">
<path strokeLinejoin="round" strokeLinecap="round" strokeWidth="2"
  stroke="currentColor"
  d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4v0a2 2 0 100-4v0zm-8 2a2 2 0 11-4 0v0a2 2 0 114 0v0z">
</path>
</svg>
const svg9=  <svg className="svg-icon2 text-success icon-dropshadow-success"
xmlns="http://www.w3.org/2000/svg" height="100%" width="100%"
viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"
strokeLinecap="round" strokeLinejoin="round">
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
<circle cx="9" cy="7" r="4"></circle>
<path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
<path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
</svg>
const svg10= <svg className="svg-icon2 fill-secondary icon-dropshadow-secondary" x="0" y="240"
viewBox="0 0 24 24" height="100%" width="100%"
preserveAspectRatio="xMidYMid meet" focusable="false">
<path opacity=".0"
  d="M20,8 L12,13 L4,8 L4,18 L20,18 L20,8 Z M20,6 L4,6 L12,10.99 L20,6 Z">
</path>
<path
  d="M4,20 L20,20 C21.1,20 22,19.1 22,18 L22,6 C22,4.9 21.1,4 20,4 L4,4 C2.9,4 2,4.9 2,6 L2,18 C2,19.1 2.9,20 4,20 Z M20,6 L12,10.99 L4,6 L20,6 Z M4,8 L12,13 L20,8 L20,18 L4,18 L4,8 Z">
</path>
</svg>
import { Col, Row } from 'react-bootstrap'
import media1 from '../../../../../assets/images/media/1.jpg';
import media2 from '../../../../../assets/images/media/2.jpg';
import media3 from '../../../../../assets/images/media/3.jpg';
import media4 from '../../../../../assets/images/media/4.jpg';
import media5 from '../../../../../assets/images/media/5.jpg';
import media6 from '../../../../../assets/images/media/6.jpg';
import media7 from '../../../../../assets/images/media/7.jpg';
import media8 from '../../../../../assets/images/media/8.jpg';
import { useState } from 'react'
// import optional lightbox plugins
import Fullscreen from "yet-another-react-lightbox/plugins/fullscreen";
import Slideshow from "yet-another-react-lightbox/plugins/slideshow";
import Thumbnails from "yet-another-react-lightbox/plugins/thumbnails";
import Zoom from "yet-another-react-lightbox/plugins/zoom";
import Lightbox from "yet-another-react-lightbox";
import "yet-another-react-lightbox/styles.css";
import { ImagesData } from '../../../../../CommonComponents/Images/CommonImages';
//Widgets
interface widget {
    id: number 
    icon: JSX.Element
    heading: string
    text: string
    data: string
    icon1: string
    data1: string
    color: string
}
export const widgets: widget []=[
    {id:1, icon:svg1, heading:'Impressions', text:'168', data:' than last month', icon1:'caret-up', data1:'0.8%', color:'success'},
    {id:2, icon:svg2, heading:'Total Followers', text:'3456k', data:' than last month', icon1:'caret-up', data1:'0.8%', color:'success'},
    {id:3, icon:svg3, heading:'Page Views', text:'234k', data:' than last month', icon1:'caret-down', data1:'43.2', color:'danger'},
    {id:4, icon:svg4, heading:'Time On Site', text:'12m 3s', data:' than last month', icon1:'caret-up', data1:'19.8', color:'success'},
]
//TOP PRODUCTS
interface Product1 {
    id: number
    main: string
    heading: string
    class: string
    class1: string
    class2: string
    class3: string
    src1: string
    color: string
  }
  export const products1: Product1[]=[
    {id:1, main:'1', heading:'Books', class:'Book', class1:'$1234', class2:'3 days ago', class3:'Regular', src1:ImagesData('products16'), color:'success'},
    {id:2, main:'2', heading:'Sports', class:'Shoes', class1:'$5436', class2:'1hr ago', class3:'Top Seller', src1:ImagesData('products14'), color:'info'},
    {id:3, main:'3', heading:'Accesories', class:'Watch', class1:'$540', class2:'1 week ago', class3:'Irregular', src1:ImagesData('products15'), color:'danger'},
    {id:4, main:'4', heading:'Toys', class:'Car', class1:'$1543', class2:'Today', class3:'Regular', src1:ImagesData('products17'), color:'success'},
    {id:5, main:'5', heading:'speakers', class:'Head set', class1:'$6427', class2:'Today', class3:'Top Pick', src1:ImagesData('products18'), color:'info'},
  ]
  //RECENT TRANSACTION
  interface transaction {
    id: number
    main: string
    color: string
    heading: string
    class: string
    class1: string
    color1: string
  }
  export const transactions : transaction[]=[
    {id:1, main:'AL', color:'primary', heading:'Alberto', class:'2 hours ago', class1:'&plus;$543.98', color1:'success'},
    {id:2, main:'HE', color:'danger', heading:'Herrouchi', class:'6 hours ago', class1:'&plus;$534.87', color1:'success'},
    {id:3, main:'AK', color:'warning', heading:'Alexandra kiso', class:'2 days ago', class1:'−$132', color1:'danger'},
    {id:4, main:'KW', color:'teal', heading:'Kate wiliam', class:'1 hours ago', class1:'&plus;$153.45', color1:'success'},
    {id:5, main:'JP', color:'success', heading:'Jean Powel', class:'5 hours ago', class1:'−$324.78', color1:'danger'},
    {id:6, main:'HC', color:'info', heading:'Hakino Chen', class:'21 hours ago', class1:'−$3277.78', color1:'danger'},
  
  ]
  //revenue of this month
  interface revenue {
    id: number
    heading: string
    main: string
    class: string
    color: string
    width: number
   
  }
  export const revenues: revenue[]=[
    {id: 1, heading:'Monthly Profit', main:'$25,854', width:50, color:'primary', class:'40% increase'},
    {id: 2, heading:'Monthly Orders', main:'8,654', width:80, color:'danger', class:'62% increase'},
    {id: 3, heading:'Monthly Revenur', main:'$98,654', width:60 ,color:'success', class:'38% increase'},
    {id: 4, heading:'Monthly Expenses', main:'$54,456', width:70, color:'pink', class:'20% increase'},
  ]
  //RECENT ACTIVITY
interface Product {
    id: number
    main: string
    heading: string
    class: string
    class1: string
    class2: string
    color: string
    color1: string
  }
  export const products : Product[]=[
    {id:1, main:"1", heading:'New Products,', class:'52% New products', class1:'More than 200 new products are added', class2:'6:45pm', color:'primary', color1:'Info'},
    {id:2, main:"2", heading:'New Sale,', class:'76% Profit earned.', class1:'$2,546 income earned in today sale', class2:'1day ago', color:'success', color1:'danger'},
    {id:3, main:"3", heading:'New Customers,', class:'24% New customers', class1:'1.3k new customers reached us this year', class2:'7:45pm', color:'warning', color1:'success'},
    {id:4, main:"4", heading:'New Reviews,', class:'96% Positive reviews.', class1:'There are 500 plus new reviews', class2:'1 min ago', color:'info', color1:'warning'},
    {id:5, main:"5", heading:'New Visits,', class:'today33% target achieved.', class1:'daily 20 plus new customers visits us', class2:'today', color:'danger', color1:'primary'},
  ]
  //products
interface widget3 {
    id: number
    src1: string
    value: number
    heading: string
    icon: string
    text: string
    data: string
    main: string
    color: string
    icon1: string
}
export const widgets3: widget3[]=[
    {id:1, value:1, src1:ImagesData('products10'), heading:'Cosmetics', icon:'star-o', text:'	$1234', data:"	last sale 3 days ago", main:'Regular', color:'success',icon1:'star'},
    {id:2, value:2, src1:ImagesData('products11'), heading:'sports', icon:'star', text:'	$5436', data:"		last sale 1hr ago", main:'Top Seller', color:'info',icon1:'star'},
    {id:3, value:3, src1:ImagesData('products12'), heading:'Bags', icon:'star-o', text:'	$540', data:"	last sale 1 week ago", main:'Irregular', color:'danger',icon1:'star-half-full'},
    {id:4, value:4, src1:ImagesData('products13'), heading:'Grocey', icon:'star-half-full', text:'	$1543', data:"	last sale Today", main:'Regular', color:'success',icon1:'star'},
    {id:5, value:5, src1:ImagesData('products14'), heading:'Mobiles', icon:'star-half-full', text:'	$6437', data:"	last sale Today", main:'Top Pick', color:'primary',icon1:'star'},
    {id:6, value:6, src1:ImagesData('products15'), heading:'Watches', icon:'star-half-full', text:'	$6343', data:"	last sale Today", main:'Top Pick', color:'primary',icon1:'star'},
]
  //Orders
  interface widget1 {
    id: number 
    icon: JSX.Element
    heading: string
    text: string
    data: string
    icon1: string
    data1: string
    color: string
    width: number
color1: string
}
export const widgets1: widget1 []=[
    {id:1, icon:svg5, heading:'All Orders', text:'3257', data:'than last month', icon1:'caret-down', data1:'43.2', color:'danger', width:78, color1:'primary'},
    {id:2, icon:svg6, heading:'Pending Orders', text:'1658', data:'than last month', icon1:'caret-up', data1:'19.8', color:'success', width:58, color1:'primary'},
    {id:3, icon:svg7, heading:'Refunds Requests', text:'168', data:' than last month', icon1:'caret-up', data1:'0.8', color:'success', width:58, color1:'primary'},
]
  //Orders
  interface widget2 {
    id: number 
    icon: JSX.Element
    heading: string
    text: string

}
export const widgets2: widget2 []=[
    {id:1, icon:svg8, heading:'New Orders', text:'262'},
    {id:2, icon:svg9, heading:'Customer Visits', text:'2635'},
    {id:3, icon:svg10, heading:'Mails', text:'245'},
]
//invoice
interface invoice {
    id: number
    heading: string
    text: string
    icon: string
    color: string
}
export const Invoices: invoice[]=[
    {id:1, heading:'Invoices', text:'625', icon:"file-text-o",color:'primary'},
    {id:2, heading:'Sales', text:'25k', icon:"signal",color:'secondary'},
    {id:3, heading:'Profit', text:'62k', icon:"usd",color:'warning'},
    {id:4, heading:'News', text:'542', icon:"newspaper-o",color:'info'},
]
export const LightboxGallery = () => {

    const [open, setOpen] = useState(false);
  
    return (
      <div>
        <Row className="masonry">
          <Col xs={6} sm={4} md={4} xl={3} className="brick mt-5">
            <img src={media1} alt='media1' onClick={() => setOpen(true)} />
          </Col>
          <Col xs={6} sm={4} md={4} xl={3} className="brick mt-5">
            <img src={media2} alt='media2' onClick={() => setOpen(true)} />
          </Col>
          <Col xs={6} sm={4} md={4} xl={3} className="brick mt-5">
            <img src={media3} alt='media3' onClick={() => setOpen(true)} />
          </Col>
          <Col xs={6} sm={4} md={4} xl={3} className="brick mt-5">
            <img src={media4} alt='media4' onClick={() => setOpen(true)} />
          </Col>
          <Col xs={6} sm={4} md={4} xl={3} className="brick mt-5">
            <img src={media5} alt='media5' onClick={() => setOpen(true)} />
          </Col>
          <Col xs={6} sm={4} md={4} xl={3} className="brick mt-5">
            <img src={media6} alt='media6' onClick={() => setOpen(true)} />
          </Col>
          <Col xs={6} sm={4} md={4} xl={3} className="brick mt-5">
            <img src={media7} alt='media7' onClick={() => setOpen(true)} />
          </Col>
          <Col xs={6} sm={4} md={4} xl={3} className="brick mt-5">
            <img src={media8} alt='media8' onClick={() => setOpen(true)} />
          </Col>
          
         
        </Row>
  
        <Lightbox open={open} close={() => setOpen(false)} plugins={[Fullscreen, Slideshow, Thumbnails, Zoom]}
        zoom={{
          maxZoomPixelRatio: 10,
          scrollToZoom: true
      }}
          slides={[{ src: media1 }, { src: media2 }, { src: media3 }, { src: media4 }, { src: media5 }, { src: media6 }, { src: media7 }, { src: media8 }]} />
      </div>
    )
  };
  //revenue vs target
  interface target {
    id: number
    heading: string
    title: string
    title1: string
    data: string
    data1: string
    text: string
    width: number
    color: string
    color1: string
  }
  export const targets : target[]=[
    {id:1, heading:'Actual Revenue Vs Target Revenue', title:'Target Revenue', title1:'Actual Revenue',data:'$35,425', data1:'$28,425', text:'+90%', color:'success', color1:'primary',width:90},
    {id:1, heading:'Actual Customer Vs Target', title:'Target Customers', title1:'Actual Customers',data:'5,643', data1:'2,341', text:'-25%', color:'danger', color1:'secondary',width:30},
    {id:1, heading:'Customer Avg Revenue Vs Target ', title:'Target Revenue', title1:'Actual Revenue',data:'$67,234', data1:'$32,543', text:'+95%', color:'success', color1:'success',width:95},
  ]
  //Visits
  interface visit {
    id: number 
    heading: string
    icon: string
    data: string
    text: string
    color: string
  }
  export const visits: visit[]=[
    {id:1, heading:'Visits', icon:'caret-up', data:'0.7%', text:'3,56,667', color:'success'},
    {id:2, heading:'Avg visit Duration', icon:'caret-up', data:'0.2%', text:'39Sec', color:'success'},
    {id:3, heading:'Page Views', icon:'caret-down', data:'12%', text:'5,987', color:'danger'},
    {id:4, heading:'Bounce Rate', icon:'caret-up', data:'0.7%', text:'35.8%', color:'success'},
    {id:5, heading:'Pages per Visit', icon:'caret-down', data:'0.2%', text:'2.89', color:'danger'},
    {id:6, heading:'Goal Conversion', icon:'caret-down', data:'0.6%', text:'12.7%', color:'danger'},
  ]
  //Facebook
  interface facebook {
    id: number
    icon: string
    text: string
    text1: string
  }
  export const facebooks: facebook[]=[
    {id:1, icon:'facebook', text:'56k', text1:'17k'},
    {id:2, icon:'twitter', text:'86k', text1:'20k'},
    {id:3, icon:'linkedin', text:'76k', text1:'27k'},
    {id:4, icon:'instagram', text:'36k', text1:'10k'},
  ]