personal-website/components/Card/index.tsx

import Image from 'next/image';
import { StyledCard } from './styles';
import { Props } from './types';

const Card = ({ title, description, image, tags, href, target, onClick }: Props) => {
	return (
		<StyledCard href={href} onClick={onClick} image={image ? Boolean(image) : undefined} target={target}>
			<div className='card-content'>
				<h3>{title}</h3>
				<p>{description}</p>
				{tags && (
					<div className='tags-wrapper'>
						{tags.map((tag, index) => (
							<span key={index}>#{tag}&nbsp;</span>
						))}
					</div>
				)}
			</div>
			{image && (
				<div className='card-image'>
					<Image alt={title} src={image} fill />
				</div>
			)}
		</StyledCard>
	);
};

export default Card;