import styled from '@emotion/styled';

import { formatDateStringWTime, getRelativeTime } from '@/utils/utils';

import { useNullableClipContext } from '../clipBrowser/ClipContext';
import { Tooltip } from '../tooltip/Tooltip';

const DateDisplay = styled.div`
  font-size: 12px;
  line-height: 16px;
  color: var(--color-foreground-tertiary);
  text-align: center;
  margin-top: -8px;
`;

export default function DateSubsection() {
  const clip = useNullableClipContext();
  if (!clip || !clip.created_at) return null;

  const relativeTime = getRelativeTime(clip.created_at);
  const fullDate = formatDateStringWTime(clip.created_at);

  return (
    <Tooltip label={fullDate} placement='top'>
      <DateDisplay>{relativeTime}</DateDisplay>
    </Tooltip>
  );
}