import React from "react";


interface ProductivityData {
  distancePerTask: number;
  spaceUtilization: number;
  taskCompletionTime: string;
}

const ProductivityDashboard: React.FC = () => {
  const data: ProductivityData = {
    distancePerTask: 45,
    spaceUtilization: 72,
    taskCompletionTime: "7:44",
  };

  // Function to calculate the stroke dash offset for the circular progress
  const calculateDashOffset = (percentage: number, circumference: number) => {
    return circumference - (percentage / 100) * circumference;
  };

  // Constants for the circular progress chart
  const radius = 60; // Radius of the circle
  const strokeWidth = 10; // Thickness of the stroke
  const diameter = radius * 2; // Diameter of the circle
  const circumference = Math.PI * (radius * 2); // Circumference of the circle

  return (
    <div className="productivity-dashboard">
      <header>
        <h2>Productivity</h2>
        <div className="options">...</div>
      </header>
      <main>
        <section className="metrics">
          <div className="metric">
            <p className="label">Distance per Task</p>
            <p className="value">{data.distancePerTask} m</p>
          </div>
          <div className="metric">
            <p className="label">Space Utilization</p>
            <p className="value">{data.spaceUtilization}%</p>
          </div>
        </section>
        <section className="chart-section">
          <svg
            className="progress-circle"
            width={diameter}
            height={diameter}
            viewBox={`0 0 ${diameter} ${diameter}`}
          >
            {/* Background Circle */}
            <circle
              cx={radius}
              cy={radius}
              r={radius - strokeWidth / 2}
              fill="transparent"
              stroke="#6c757d"
              strokeWidth={strokeWidth}
            />
            {/* Progress Circle */}
            <circle
              cx={radius}
              cy={radius}
              r={radius - strokeWidth / 2}
              fill="transparent"
              stroke="#2ecc71"
              strokeWidth={strokeWidth}
              strokeDasharray={circumference}
              strokeDashoffset={calculateDashOffset(data.spaceUtilization, circumference)}
              strokeLinecap="round"
              transform={`rotate(-90 ${radius} ${radius})`}
            />
          </svg>
          <div className="chart-details">
            <p className="title">Task Completion Time</p>
            <p className="time">{data.taskCompletionTime}</p>
            <p className="subtitle">Total Score</p>
          </div>
        </section>
      </main>
    </div>
  );
};

export default ProductivityDashboard;