import * as React from 'react';

export interface ShowcaseItemProps {
	imageUrl?: string;
	title: string;
	description: string;
}

export const ShowcaseItem: React.FC<ShowcaseItemProps> = ({
	imageUrl,
	title,
	description,
}) => (
	<div className="relative rounded overflow-hidden">
		<div className="bg-current absolute top-0 left-0 w-full h-full opacity-10" />
		<div className="flex flex-col sm:flex-row sm:items-center sm:gap-4 relative">
			<div className="shrink-0 w-full sm:max-w-[8rem]">
				<span className="w-full pb-[75%] relative block">
					<span className="absolute block w-full h-full">
						<img
							src={imageUrl ?? 'http://placehold.it/1'}
							className="w-full h-full"
							alt={title}
						/>
					</span>
				</span>
			</div>
			<div className="flex-auto min-w-0 flex flex-col gap-2 p-4 sm:py-2">
				<h3 className="m-0 whitespace-nowrap text-ellipsis overflow-hidden w-full text-2xl">{title}</h3>
				<p className="m-0 line-clamp-2 text-xs">{description}</p>
			</div>
		</div>
	</div>
);
