HistoryItem.tsx

import React from "react";
import { truncateString, urlWithoutSchema } from "../services/helper";
import {
  StyledInfo,
  StyledHistoryItem,
  StyledItemLink,
  StyledTitle,
  StyledTime,
} from "./HistoryItem.styled";

interface HistoryItemProps {
  item: chrome.history.HistoryItem;
}

export const HistoryItem: React.FC<HistoryItemProps> = ({ item }) => {
  const lastVisitDate = new Date(item.lastVisitTime ?? 0);
  const time = lastVisitDate.toLocaleTimeString().substring(0, 5);

  const url = urlWithoutSchema(item.url ?? "");

  return (
    <StyledHistoryItem>
      <StyledInfo>
        <StyledTitle title={item.title}>
          {truncateString(item.title ?? "", 50)}
        </StyledTitle>
        <br />
        <StyledItemLink href={item.url} target="_blank" title={item.url}>
          {truncateString(url, 30)}
        </StyledItemLink>
      </StyledInfo>
      <StyledTime title={lastVisitDate.toTimeString()}>{time}</StyledTime>
    </StyledHistoryItem>
  );
};