import { useEffect, useState } from "react";
import dayjs from "dayjs";
import "dayjs/locale/en";
import utc from "dayjs/plugin/utc";
import timezone from "dayjs/plugin/timezone";
import {Typography} from "@mui/material"

interface TimeStamp {
  date?: string | Date,
  sx?: React.CSSProperties,
  timeZone?: string,
  timeFormat? :string
}

export default function ConvertUtcToPst({ date, sx, timeZone="America/Los_Angeles", timeFormat }:TimeStamp) {
    dayjs.extend(utc);
    dayjs.extend(timezone);
    dayjs.locale("en");
    return (
      <Typography component="span" data-testid="timestamp" sx={sx}>{date ? dayjs(date).tz(timeZone==="" ? "America/Los_Angeles" : timeZone).format(`${timeFormat}`) : ""}</Typography>
    )
}