import React, { ComponentProps } from 'react';
import { Text, as } from 'folds';
import { formatTimestamp } from '../../utils/formatTimestamp';

export type TimeProps = {
  compact?: boolean;
  ts: number;
  hour24Clock: boolean;
  dateFormatString: string;
};

/**
 * Renders a formatted timestamp, supporting compact and full display modes.
 *
 * `compact` always shows the clock time; otherwise the shared `formatTimestamp`
 * rules apply (today → time, yesterday/this week → day word + time, else date + time).
 *
 * @param {number} ts - The timestamp to display.
 * @param {boolean} [compact=false] - If true, always show only the time.
 * @param {boolean} hour24Clock - Whether to use 24-hour time format.
 * @param {string} dateFormatString - Format string for the date part.
 * @returns {React.ReactElement} A <Text as="time"> element with the formatted date/time.
 */
export const Time = as<'span', TimeProps & ComponentProps<typeof Text>>(
  ({ compact, hour24Clock, dateFormatString, ts, ...props }, ref) => {
    const time = formatTimestamp(ts, { hour24Clock, dateFormatString }, compact ? 'time' : 'auto');

    return (
      <Text as="time" style={{ flexShrink: 0 }} size="T200" priority="300" {...props} ref={ref}>
        {time}
      </Text>
    );
  },
);