import clsx from "clsx"
import { format } from "date-fns"
import type { ComponentProps } from "react"

export interface TimeProps extends Omit<ComponentProps<"time">, "children"> {
  children: Parameters<typeof format>[0]
  dateTimeFormatStr?: string
  formatStr?: string
}

export const Time = ({
  children,
  dateTimeFormatStr = "dd-MM-yyyy",
  formatStr = "PPP",
  className,
  ...props
}: TimeProps) => (
  <time
    dateTime={format(children, dateTimeFormatStr)}
    className={clsx("whitespace-nowrap", className)}
    {...props}
  >
    {format(children, formatStr)}
  </time>
)

Time.displayName = "Time"