import React from "react";
import { getFormattedDateWithTimezone } from "@ax/helpers";
import { Tooltip } from "@ax/components";

import * as S from "./style";

const Item = (props: IItemProps): JSX.Element => {
	const { title, type, date, disabled = false, onClick } = props;

	const notAllowed = "You are not allowed to access this page";

	return (
		<Tooltip content={disabled ? notAllowed : undefined} bottom>
			<S.ListItem onClick={onClick} disabled={disabled}>
				<S.Content>
					<S.Header>
						<S.Type>{type}</S.Type>
						<S.Date>{getFormattedDateWithTimezone(date, "d MMM Y")}</S.Date>
					</S.Header>
					<S.Title>{title}</S.Title>
				</S.Content>
			</S.ListItem>
		</Tooltip>
	);
};

interface IItemProps {
	title: string;
	type: string;
	date: Date;
	disabled?: boolean;
	onClick: () => void;
}

export default Item;
