import React from "react";

const MonthlyComparison = ({ monthlyComparison }) => {
  const orderGrowth = monthlyComparison?.growth?.orders || 0;
  const revenueGrowth = monthlyComparison?.growth?.revenue || 0;

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
      {/* Orders Comparison */}
      <div className="bg-gradient-to-br from-blue-50 to-white shadow-lg rounded-2xl p-6 border border-blue-100">
        <div className="flex items-center justify-between mb-4">
          <h3 className="text-lg font-bold text-gray-900">Monthly Orders Comparison</h3>
          <svg className="w-8 h-8 text-blue-500" fill="currentColor" viewBox="0 0 20 20">
            <path d="M2 11a1 1 0 011-1h2a1 1 0 011 1v5a1 1 0 01-1 1H3a1 1 0 01-1-1v-5zM8 7a1 1 0 011-1h2a1 1 0 011 1v9a1 1 0 01-1 1H9a1 1 0 01-1-1V7zM14 4a1 1 0 011-1h2a1 1 0 011 1v12a1 1 0 01-1 1h-2a1 1 0 01-1-1V4z" />
          </svg>
        </div>
        <div className="space-y-4">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm text-gray-500">{monthlyComparison?.currentMonth?.label}</p>
              <p className="text-3xl font-bold text-blue-600">
                {monthlyComparison?.currentMonth?.orders || 0}
              </p>
            </div>
            <div className="text-right">
              <p className="text-sm text-gray-500">{monthlyComparison?.previousMonth?.label}</p>
              <p className="text-2xl font-semibold text-gray-400">
                {monthlyComparison?.previousMonth?.orders || 0}
              </p>
            </div>
          </div>
          <div className="pt-4 border-t border-blue-100">
            <div className="flex items-center gap-2">
              <span className={`text-lg font-bold ${orderGrowth >= 0 ? "text-green-600" : "text-red-600"}`}>
                {orderGrowth >= 0 ? "+" : ""}{orderGrowth.toFixed(1)}%
              </span>
              <span className="text-sm text-gray-600">growth</span>
            </div>
          </div>
        </div>
      </div>

      {/* Revenue Comparison */}
      <div className="bg-gradient-to-br from-green-50 to-white shadow-lg rounded-2xl p-6 border border-green-100">
        <div className="flex items-center justify-between mb-4">
          <h3 className="text-lg font-bold text-gray-900">Monthly Revenue Comparison</h3>
          <svg className="w-8 h-8 text-green-500" fill="currentColor" viewBox="0 0 20 20">
            <path d="M8.433 7.418c.155-.103.346-.196.567-.267v1.698a2.305 2.305 0 01-.567-.267C8.07 8.34 8 8.114 8 8c0-.114.07-.34.433-.582zM11 12.849v-1.698c.22.071.412.164.567.267.364.243.433.468.433.582 0 .114-.07.34-.433.582a2.305 2.305 0 01-.567.267z" />
            <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-13a1 1 0 10-2 0v.092a4.535 4.535 0 00-1.676.662C6.602 6.234 6 7.009 6 8c0 .99.602 1.765 1.324 2.246.48.32 1.054.545 1.676.662v1.941c-.391-.127-.68-.317-.843-.504a1 1 0 10-1.51 1.31c.562.649 1.413 1.076 2.353 1.253V15a1 1 0 102 0v-.092a4.535 4.535 0 001.676-.662C13.398 13.766 14 12.991 14 12c0-.99-.602-1.765-1.324-2.246A4.535 4.535 0 0011 9.092V7.151c.391.127.68.317.843.504a1 1 0 101.511-1.31c-.563-.649-1.413-1.076-2.354-1.253V5z" clipRule="evenodd" />
          </svg>
        </div>
        <div className="space-y-4">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm text-gray-500">{monthlyComparison?.currentMonth?.label}</p>
              <p className="text-3xl font-bold text-green-600">
                ₹{(monthlyComparison?.currentMonth?.revenue || 0).toLocaleString()}
              </p>
            </div>
            <div className="text-right">
              <p className="text-sm text-gray-500">{monthlyComparison?.previousMonth?.label}</p>
              <p className="text-2xl font-semibold text-gray-400">
                ₹{(monthlyComparison?.previousMonth?.revenue || 0).toLocaleString()}
              </p>
            </div>
          </div>
          <div className="pt-4 border-t border-green-100">
            <div className="flex items-center gap-2">
              <span className={`text-lg font-bold ${revenueGrowth >= 0 ? "text-green-600" : "text-red-600"}`}>
                {revenueGrowth >= 0 ? "+" : ""}{revenueGrowth.toFixed(1)}%
              </span>
              <span className="text-sm text-gray-600">growth</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default MonthlyComparison;