import React from "react";

const MonthlyCampaignState = () => {
  return (
    <div className='col-xxl-4'>
      <div className='card h-100'>
        <div className='card-body p-24'>
          <div className='d-flex align-items-start flex-column gap-2'>
            <h6 className='mb-2 fw-bold text-lg'>Monthly Campaign State</h6>
            <span className='text-secondary-light'>7.2k Social visitors</span>
          </div>
          <div className='d-flex flex-column gap-32 mt-32'>
            <div className='d-flex align-items-center justify-content-between gap-3'>
              <div className='d-flex align-items-center gap-3'>
                <div className='w-40-px h-40-px rounded-circle d-flex justify-content-center align-items-center bg-lilac-100 flex-shrink-0'>
                  <img
                    src='/assets/images/home-nine/socials1.png'
                    alt=''
                    className=''
                  />
                </div>
                <div className='flex-grow-1'>
                  <h6 className='text-md mb-0 fw-semibold'>Email</h6>
                </div>
              </div>
              <div className='d-flex align-items-center gap-8'>
                <span className='text-secondary-light text-md fw-medium'>
                  6,200
                </span>
                <span className='text-success-600 text-md fw-medium'>0.3%</span>
              </div>
            </div>
            <div className='d-flex align-items-center justify-content-between gap-3'>
              <div className='d-flex align-items-center gap-3'>
                <div className='w-40-px h-40-px rounded-circle d-flex justify-content-center align-items-center bg-warning-100 flex-shrink-0'>
                  <img
                    src='/assets/images/home-nine/socials2.png'
                    alt=''
                    className=''
                  />
                </div>
                <div className='flex-grow-1'>
                  <h6 className='text-md mb-0 fw-semibold'>Clicked</h6>
                </div>
              </div>
              <div className='d-flex align-items-center gap-8'>
                <span className='text-secondary-light text-md fw-medium'>
                  Clicked
                </span>
                <span className='text-danger-600 text-md fw-medium'>1.3%</span>
              </div>
            </div>
            <div className='d-flex align-items-center justify-content-between gap-3'>
              <div className='d-flex align-items-center gap-3'>
                <div className='w-40-px h-40-px rounded-circle d-flex justify-content-center align-items-center bg-info-100 flex-shrink-0'>
                  <img
                    src='/assets/images/home-nine/socials3.png'
                    alt=''
                    className=''
                  />
                </div>
                <div className='flex-grow-1'>
                  <h6 className='text-md mb-0 fw-semibold'>Subscribe</h6>
                </div>
              </div>
              <div className='d-flex align-items-center gap-8'>
                <span className='text-secondary-light text-md fw-medium'>
                  5,175
                </span>
                <span className='text-success-600 text-md fw-medium'>0.3%</span>
              </div>
            </div>
            <div className='d-flex align-items-center justify-content-between gap-3'>
              <div className='d-flex align-items-center gap-3'>
                <div className='w-40-px h-40-px rounded-circle d-flex justify-content-center align-items-center bg-success-100 flex-shrink-0'>
                  <img
                    src='/assets/images/home-nine/socials4.png'
                    alt=''
                    className=''
                  />
                </div>
                <div className='flex-grow-1'>
                  <h6 className='text-md mb-0 fw-semibold'>Complaints </h6>
                </div>
              </div>
              <div className='d-flex align-items-center gap-8'>
                <span className='text-secondary-light text-md fw-medium'>
                  3,780
                </span>
                <span className='text-success-600 text-md fw-medium'>0.3%</span>
              </div>
            </div>
            <div className='d-flex align-items-center justify-content-between gap-3'>
              <div className='d-flex align-items-center gap-3'>
                <div className='w-40-px h-40-px rounded-circle d-flex justify-content-center align-items-center bg-danger-100 flex-shrink-0'>
                  <img
                    src='/assets/images/home-nine/socials5.png'
                    alt=''
                    className=''
                  />
                </div>
                <div className='flex-grow-1'>
                  <h6 className='text-md mb-0 fw-semibold'>Unsubscribe</h6>
                </div>
              </div>
              <div className='d-flex align-items-center gap-8'>
                <span className='text-secondary-light text-md fw-medium'>
                  4,120
                </span>
                <span className='text-success-600 text-md fw-medium'>0.3%</span>
              </div>
            </div>
            <div className='d-flex align-items-center justify-content-between gap-3'>
              <div className='d-flex align-items-center gap-3'>
                <div className='w-40-px h-40-px rounded-circle d-flex justify-content-center align-items-center bg-info-100 flex-shrink-0'>
                  <img
                    src='/assets/images/home-nine/socials3.png'
                    alt=''
                    className=''
                  />
                </div>
                <div className='flex-grow-1'>
                  <h6 className='text-md mb-0 fw-semibold'>Subscribe</h6>
                </div>
              </div>
              <div className='d-flex align-items-center gap-8'>
                <span className='text-secondary-light text-md fw-medium'>
                  5,175
                </span>
                <span className='text-success-600 text-md fw-medium'>0.3%</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default MonthlyCampaignState;
