'use client'

import { Avatar, AvatarFallback, AvatarImage } from '@admin/components/ui/avatar'
import { Badge } from '@admin/components/ui/badge'
import { Tooltip, TooltipContent, TooltipTrigger } from '@admin/components/ui/tooltip'
import { getUserInitials } from '@admin/utils/user/get-user-initials'
import { format, formatDistanceToNow } from 'date-fns'

interface CurrentVersionAuthor {
  name: string
  email: string
  image?: string | null
}

interface EntityVersionsCurrentRowProps {
  updatedAt: Date | string
  author: CurrentVersionAuthor | null
}

export function EntityVersionsCurrentRow({ updatedAt, author }: EntityVersionsCurrentRowProps) {
  const updatedDate = new Date(updatedAt)
  const authorLabel = author?.name || author?.email || 'System'

  return (
    <div className="flex items-center justify-between gap-3 rounded-sm border border-border bg-card px-3 py-3 shadow-input">
      <div className="flex min-w-0 items-center gap-3">
        <Avatar size="sm">
          {author?.image ? <AvatarImage src={author.image} alt={authorLabel} /> : null}
          <AvatarFallback>{getUserInitials(authorLabel)}</AvatarFallback>
        </Avatar>
        <div className="min-w-0">
          <div className="flex items-center gap-2">
            <p className="truncate font-medium text-foreground">{authorLabel}</p>
            <Badge variant="outline">Current</Badge>
          </div>
          <Tooltip>
            <TooltipTrigger render={<p className="w-fit text-xs text-muted-foreground" />}>
              Edited {formatDistanceToNow(updatedDate, { addSuffix: true })}
            </TooltipTrigger>
            <TooltipContent>{format(updatedDate, 'PPpp')}</TooltipContent>
          </Tooltip>
        </div>
      </div>
    </div>
  )
}