import React from 'react';
import {
    OCR,
    SmsAnnounce,
    OTP
} from '../../../assets/icon';
import { DashboardImg } from '../../../assets/images';

function Dashboard() {    
  const cardData = [
      {
          icon: OCR,
          title: 'Optical Character Recognition',
          hits: '0',
          percentage: '0%',
          note: 'From Yesterday',
      },
      {
          icon: SmsAnnounce,
          title: 'SMS Announcement',
          hits: '0',
          percentage: '0%',
          note: 'From Yesterday',
      },
      {
          icon: OTP,
          title: 'SMS OTP',
          hits: '0',
          percentage: '0%',
          note: 'From Yesterday',
      },
  ];

  return (
    <div className="container mt-5">
      {/* Check Our Service Status Section */}
      <div style={styles.wrapper}>
          <div className="d-flex justify-content-between align-items-center">
              <div style={styles.alert}>
                <h5 className="mb-1" style={styles.heading(600, '#0542cc')}>Check Our Service Status</h5>
                <p className="mb-0" style={styles.text}>
                    Stay updated on the current status of our services in real-time. Easily monitor performance, downtime, and maintenance schedules to ensure seamless integration and uninterrupted usage.
                </p>
              </div>
              <button className="btn btn-primary">
                <i className="fas fa-chevron-right"></i>
              </button>
          </div>
      </div>

      {/* Your Daily Usage Section */}
      <div className="card shadow-sm p-3 mb-4">
          <h5 className="mb-3">
              <i className="fas fa-info me-2"></i>
              <span style={styles.heading(400, '#212529')}>Your Daily Usage</span>
          </h5>

          <div className="row">
              {cardData.map((card, index) => (
                  <div className="col-md-4 mb-3" key={index}>
                      <div className="card h-100" style={styles.card}>
                          <div className="card-body">
                              <div style={styles.flexContainer}>
                                  <img src={card.icon} alt={card.title.toLowerCase()} style={styles.icon} />
                                  <h6 className="card-title" style={styles.heading(600, '#0542cc')}>{card.title}</h6>
                              </div>

                              <div style={styles.valueContainer}>
                                  <p className="card-text" style={styles.hits}>{card.hits}</p>
                                  <p>Hits</p>
                                  <p className="text-primary" style={styles.percentage}>
                                      {card.percentage}
                                  </p>
                                  <p>{card.note}</p>
                              </div>
                          </div>
                      </div>
                  </div>
              ))}
          </div>

          {/* Subscribe Other Services Section */}
          <div className="row">
            <div className="col-12">
                <div className="card mt-4" style={styles.cardBottom}>
                    <div className="card-body text-center">
                        <div style={styles.flexContainer} className="flex-column flex-md-row">
                            {/* Image on top for smaller screens, beside text on larger screens */}
                            <img 
                                src={DashboardImg} 
                                alt="dashImg" 
                                className="mb-3 mb-md-0" 
                                style={styles.responsiveImage} 
                            />
                            <div style={styles.contentBottom}>
                                <h3 style={styles.heading(600, '#000')}>Subscribe Other Services</h3>
                                <p className="card-text" style={styles.paragraph}>
                                    Unlock access to more features by subscribing to our other services. Once subscribed, you'll gain insights through detailed statistics and data tailored to your needs.
                                </p>
                                <button className="btn" style={styles.button}>Contact Us</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
          </div>
      </div>
    </div>
  );
}

export default Dashboard;

const styles = {
    wrapper: {
        backgroundColor: '#e2fbea',
        borderWidth: '1px',
        borderStyle: 'solid',
        borderColor: '#d2d6de',
        borderRadius: '5px',
        padding: '16px',
        marginBottom: '2%',
    },
    alert: {
        backgroundColor: '#e2fbea',
        padding: '6px 22px 0 0',
        marginBottom: '2%',
    },
    heading: (fontWeight, color) => ({
        fontWeight: fontWeight,
        color: color,
    }),
    text: {
        fontWeight: 400,
        color: '#212529',
        marginTop: '2vh',
    },
    card: {
        border: '0.1px solid gray',
        borderRadius: '2%',
        filter: 'drop-shadow(0 2px 5px rgba(0, 0, 0, 0.1))',
    },
    icon: {
        marginBottom: '3%',
        marginRight: '3%',
    },
    responsiveImage: {
        maxWidth: '100%',    // Ensure the image doesn't overflow its container
        height: 'auto',      // Maintain aspect ratio of the image
    },
    flexContainer: {
        display: 'flex',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center', // Align items in the center by default
        gap: '2%',
    },
    hits: {
        fontWeight: 600,
        fontSize: '40px',
        color: '#0542cc',
    },
    percentage: {
        fontWeight: 600,
        fontSize: '40px',
        color: '#0542cc',
    },
    valueContainer: {
        display: 'flex',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        gap: '4%',
        margin: '10% 0 0 0',
    },
    cardBottom: {
        border: '0.1px solid gray',
        borderRadius: '2%',
        filter: 'drop-shadow(0 2px 5px rgba(0, 0, 0, 0.1))',
    },
    contentBottom: {
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'flex-start',
        gap: '10px',
    },
    paragraph: {
        textAlign: 'left',
        fontWeight: 400,
    },
    button: {
        backgroundColor: '#0542cc',
        borderRadius: '5px',
        color: 'white',
        padding: '10px 20px',
        border: 'none',
        textAlign: 'center',
        cursor: 'pointer',
    },
};
