"use client";
import React from "react";

interface DashboardBoxProps {
  title: string;
  value: string | number;
  unit: string;
  time?: string;
}

const DashboardBox: React.FC<DashboardBoxProps> = ({
  title,
  value,
  unit,
  time,
}) => {
  return (
    <div
      style={{
        border: "1px solid #e0e0e0",
        borderRadius: 12,
        padding: 24,
        background: "#fff",
        boxShadow: "0 2px 8px rgba(0,0,0,0.04)",
        marginBottom: 16,
      }}
    >
      <div style={{ fontWeight: 600, fontSize: 18, marginBottom: 12 }}>
        {title}
      </div>
      <div style={{ fontSize: 24, color: "#1976d2", marginBottom: 8 }}>
        <span style={{ fontSize: 32, fontWeight: 700 }}>{value}</span> {unit}
      </div>
      <div style={{ color: "#888" }}>{time || "NaN/NaN/NaN NaN:NaN:NaN"}</div>
    </div>
  );
};

export default DashboardBox;
