Alert

import React from 'react';
import { alertStyleKeys, getAlertStyleKeys } from '../lib/core';
import type { AlertBaseProps } from '../lib/core';
import styles from './alert.module.scss';

export interface AlertProps extends React.HTMLAttributes<HTMLDivElement>, AlertBaseProps {}

const Alert = React.forwardRef<HTMLDivElement, AlertProps>(({ className = '', variant = 'default', children, ...props }, ref) => {
	const styleKeys = getAlertStyleKeys(variant);
	const classes = [styles[styleKeys.base], styles[styleKeys.variant], className].filter(Boolean).join(' ');

	return (
		<div ref={ref} role="alert" data-slot="alert" data-variant={variant} className={classes} {...props}>
			{children}
		</div>
	);
});
Alert.displayName = 'Alert';

export interface AlertTitleProps extends React.HTMLAttributes<HTMLDivElement> {}

const AlertTitle = React.forwardRef<HTMLDivElement, AlertTitleProps>(({ className = '', children, ...props }, ref) => {
	return (
		<div ref={ref} data-slot="alert-title" className={`${styles[alertStyleKeys.title]} ${className}`} {...props}>
			{children}
		</div>
	);
});
AlertTitle.displayName = 'AlertTitle';

export interface AlertDescriptionProps extends React.HTMLAttributes<HTMLDivElement> {}

const AlertDescription = React.forwardRef<HTMLDivElement, AlertDescriptionProps>(({ className = '', children, ...props }, ref) => {
	return (
		<div ref={ref} data-slot="alert-description" className={`${styles[alertStyleKeys.description]} ${className}`} {...props}>
			{children}
		</div>
	);
});
AlertDescription.displayName = 'AlertDescription';

export { Alert, AlertTitle, AlertDescription };
export default Alert;

@use '../../../styles/variables/colors' as *;

// Alert 根容器：网格布局，直接子 svg 图标占据首列
.alert {
	position: relative;
	display: grid;
	width: 100%;
	grid-template-columns: 0 1fr;
	align-items: start;
	gap: $spacing-1;
	border-radius: $radius;
	border: 1px solid transparent;
	padding: $spacing-3 $spacing-4;
	font-size: $text-sm;

	// 存在直接子 SVG 图标时启用图标列
	&:has(> svg) {
		grid-template-columns: $spacing-4 1fr;
		gap: $spacing-3;
	}

	> svg {
		width: $spacing-4;
		height: $spacing-4;
		transform: translateY(2px);
		color: currentColor;
	}

	// 样式变体
	&.variantDefault {
		background-color: $card;
		color: $card-foreground;
		border-color: $border;
	}

	&.variantDestructive {
		background-color: $card;
		color: $destructive;
		border-color: color-mix(in srgb, $destructive 30%, transparent);

		.description {
			color: $destructive-muted-foreground;
		}
	}
}

// 标题与描述统一放在第二列
.title,
.description {
	grid-column-start: 2;
}

// 标题
.title {
	min-height: $spacing-4;
	font-weight: $font-medium;
	line-height: $leading-tight;
	letter-spacing: -0.01em;
	overflow-wrap: anywhere;
}

// 描述
.description {
	display: grid;
	justify-items: start;
	gap: $spacing-1;
	font-size: $text-sm;
	line-height: $leading-relaxed;
	color: $muted-foreground;

	p {
		line-height: $leading-relaxed;
	}
}

export { Alert, AlertTitle, AlertDescription, type AlertProps, type AlertTitleProps, type AlertDescriptionProps } from './alert';