import * as React from 'react';
import {Icon, IconProps} from '@/components/molecules/Icon';

export interface FeedItemProps {
	date: Date;
	type: string;
	description: string;
}

const formatFeedItemDate = (date: Date) => {
	const mm = (date.getMonth() + 1).toString().padStart(2, '0');
	const dd = date.getDate().toString().padStart(2, '0');

	return `${mm}.${dd}`;
};

const FEED_ITEM_TYPE_ICONS: Record<FeedItemProps['type'], IconProps['name']> = {
	code: 'git-commit',
};

export const FeedItem: React.FC<FeedItemProps> = ({
	date,
	type,
	description,
}) => (
	<div className="pb-[35%] sm:pb-[50%] relative">
		<div className="absolute top-0 left-0 w-full h-full">
			<dl className="h-full w-full relative p-2 rounded before:pointer-events-none before:rounded-inherit before:opacity-10 before:bg-current before:absolute before:top-0 before:left-0 before:w-full before:h-full grid">
				<div className="col-start-2 row-start-1 text-right text-xs font-semibold">
					<dt className="sr-only">Date</dt>
					<dd>
						<time dateTime={date.toISOString()}>
							{formatFeedItemDate(date)}
						</time>
					</dd>
				</div>
				<div className="col-start-1 row-start-1">
					<dt className="sr-only">Type</dt>
					<dd>
						<Icon
							name={FEED_ITEM_TYPE_ICONS[type]}
							aria-label={type}
						/>
					</dd>
				</div>
				<div className="col-start-1 col-span-2 row-start-2 flex items-end text-xs relative">
					<dt className="sr-only">Description</dt>
					<dd
						className="absolute bottom-0 left-0 w-full line-clamp-3"
					>
						{description}
					</dd>
				</div>
			</dl>
		</div>
	</div>
);
