import React from "react";
import { Badge } from "../../../../Badge";
import "./DateSeparator.styles.scss";

export const DateSeparator = ({ date, className = "date-separator" }) => {
  const formatDate = (date) => {
    if (!date) return "";

    const today = new Date();
    const msgDate = new Date(date);

    // normalize
    const todayOnly = new Date(
      today.getFullYear(),
      today.getMonth(),
      today.getDate()
    );
    const msgOnly = new Date(
      msgDate.getFullYear(),
      msgDate.getMonth(),
      msgDate.getDate()
    );

    const diffDays = (todayOnly - msgOnly) / (1000 * 60 * 60 * 24);

    if (diffDays === 0) return "Today";
    if (diffDays === 1) return "Yesterday";

    return msgDate.toLocaleDateString("en-US", {
      year: "numeric",
      month: "short",
      day: "numeric",
    });
  };

  return (
    <>
      {/* <div className={className}>
       <span className="date-text">{formatDate(date)}</span>
     </div> */}
      <div className={className}>
        <Badge
          color="default"
          // icon={<React.Memo />}
          label={formatDate(date)}
          size="small"
          variant="stroke"
        />
      </div>
    </>
  );
};
