import { useIntl } from 'react-intl';

import { useUsers } from '@/context/UsersContext';
import { ILibraryItemEx } from '@/models/library';

interface InfoLibraryItemProps {
  item?: ILibraryItemEx;
}

function InfoLibraryItem({ item }: InfoLibraryItemProps) {
  const { getUserLabel } = useUsers();
  const intl = useIntl();
  return (
    <div className='flex flex-col gap-1'>
      <div className='flex'>
        <label className='font-semibold'>Владелец:</label>
        <span className='min-w-[200px] ml-2 overflow-ellipsis overflow-hidden whitespace-nowrap'>
          {getUserLabel(item?.owner ?? null)}
        </span>
      </div>
      <div className='flex'>
        <label className='font-semibold'>Отслеживают:</label>
        <span id='subscriber-count' className='ml-2'>
          {item?.subscribers.length ?? 0}
        </span>
      </div>
      <div className='flex'>
        <label className='font-semibold'>Дата обновления:</label>
        <span className='ml-2'>{item && new Date(item?.time_update).toLocaleString(intl.locale)}</span>
      </div>
      <div className='flex'>
        <label className='font-semibold'>Дата создания:</label>
        <span className='ml-8'>{item && new Date(item?.time_create).toLocaleString(intl.locale)}</span>
      </div>
    </div>
  );
}

export default InfoLibraryItem;