'use client';
import './MediaCard.css'


export default function MediaCard() {
 

  return (
   <>
   <div className="container-mediacards">
         <div className='Tous-heading'>Tous</div>

        <div className="cards-container-media">

            <div className="card-media">
                
                <div className="card-left">
                    
                    <div className="card-image-container">
                        <img src="/images/Asset 31.svg" alt="Halloween Event"/>
                        
                    </div>
                    <div className="card-actions">
{/* <img src="/images/Asset 33.svg" alt="" className="action-btn btn-add"/> */}




                        <button  className="action-btn btn-add">+</button>
                        <button className="action-btn btn-remove">×</button>
                        <div className="edit-icon">
<img src="/images/Asset 32.svg" alt="" />

                            {/* <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
                                <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
                            </svg> */}
                        </div>
                    </div>
                </div>
                <div className="card-content">
                    <div className="card-main-info">
                        <div className="card-header">
                            <div className="card-title-input">
                                <span className="card-title-text">Halloween ad</span>
                                <span className="edit-label">edit</span>
                            </div>
                        </div>
                        <div className="card-info">
                            <div className="info-item">File dimensions : 900 x 450 px</div>

                            {/* File already used | Campaign #6£ File size : 4,3 Mo */}
                            <div className="info-item">File already used | Campaign #6£</div>
                            <div className="info-item">File size : 4,3 Mo</div>
                        </div>
                    </div>
                    
                </div>

                {/* card footer */}
                <div>
                    <div className="card-footer">
                        <div className="footer-title">Suitable for</div>
                        <div className="footer-items">
                            <div className="footer-item">Single Event Page</div>
                            <div className="footer-item">City Hub Page</div>
                        </div>
                    </div>
                </div>
                
            </div>
<div className='border-line-media'></div>
    {/* .............card2 */}
             <div className="card-media">
                
                <div className="card-left">
                    <div className="card-image-container-two">
                     <img src="/images/Asset 31.svg" alt="Halloween Event"/>
                        
                    </div>
                    <div className="card-actions">
{/* <img src="/images/Asset 33.svg" alt="" className="action-btn btn-add"/> */}




                        <button  className="action-btn btn-add">+</button>
                        <button className="action-btn btn-remove">×</button>
                        
                        <div className="edit-icon">
<img src="/images/Asset 32.svg" alt="" />

                            {/* <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
                                <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
                            </svg> */}
                        </div>
                    </div>
                </div>
                <div className="card-content">
                    <div className="card-main-info">
                        <div className="card-header">
                            <div className="card-title-input">
                                <span className="card-title-text">Name a random file</span>
                                <span className="edit-label">edit</span>
                            </div>
                        </div>
                        <div className="card-info">
                            <div className="info-item">File dimensions : 900 x 450 px</div>

                            {/* File already used | Campaign #6£ File size : 4,3 Mo */}
                            <div className="info-item">File already used | Campaign #15</div>
                            <div className="info-item">File size : 2,9 Mo</div>
                        </div>
                    </div>
                    
                </div>

                {/* card footer */}
                <div>
                    <div className="card-footer-two">
                         <div className="footer-title">Suitable for</div>
                        <div className="footer-title-item">Category Page</div>
                        {/* <div className="footer-items">
                            <div className="footer-item">Single Event Page</div>
                            <div className="footer-item">City Hub Page</div>
                        </div> */}
                    </div>
                </div>
                
            </div>
<div className='border-line-media'></div>

        </div>
    </div>
   </>
  );
}
