import { Cta } from '../Cta';
import { cardVariables, colorsOf } from '../colors';
import { DismissButton } from '../DismissButton';
export const Card = ({
notification,
href,
external,
dismissible,
onDismiss,
onClick,
}) => {
const { title, content, image } = notification;
const colors = colorsOf(notification);
return (
<div
className="relative h-full min-h-32 w-full rounded-sm border border-[#d1d5db] bg-(--ext-notification-card-main,#ffffff) px-5 py-5 text-base text-(--ext-notification-card-text,#1e1e1e) lg:px-8 lg:py-6"
style={cardVariables(colors)}
data-test="notification-card"
>
{dismissible && (
<DismissButton
onClick={onDismiss}
size={32}
className="absolute right-0 top-0 flex h-8 w-8 items-center justify-center rounded-bl rounded-se bg-[#f3f4f6] p-1.5 text-center text-gray-900 hover:bg-[#d1d5db] rtl:left-0 rtl:right-auto rtl:rounded-bl-none rtl:rounded-br"
/>
)}
<div className="flex flex-col items-start gap-4">
{image && (
<img src={image} alt="" className="max-h-8 w-auto rounded-xs" />
)}
<div>
<div className="text-lg font-semibold">{title}</div>
<div className="mt-1 text-sm">{content}</div>
</div>
<Cta
notification={notification}
href={href}
external={external}
onClick={onClick}
surface="design"
className="inline-flex h-10 cursor-pointer items-center rounded-xs bg-design-main px-4 text-sm text-design-text no-underline"
/>
</div>
</div>
);
};