import React from "react";

import { FiExternalLink } from "react-icons/fi";

export interface SocialCardProps {
	children: React.ReactNode;
	color: string;
	link: string;
}

export const SocialCard = ({
	children,
	color,
	link,
}: SocialCardProps): JSX.Element => {
	return (
		<div
			className={`group relative flex h-24 w-36 min-w-max flex-shrink-0 rounded-xl shadow-xl ${color} m-2`}
		>
			{children}
			<a
				className="absolute top-0 left-0 right-0 bottom-0 hidden rounded-xl border border-accent bg-secondary bg-opacity-95 text-2xl shadow-xl group-hover:flex"
				href={link}
				rel="noreferrer"
				target="_blank"
			>
				<FiExternalLink className="m-auto" />
			</a>
		</div>
	);
};
