import { Box } from '@/ui/Box';
import { Icon } from '@/ui/Icon';
import { Text } from '@/ui/Text';
import { AlertCircle, AlertTriangle, CheckCircle, Info } from 'lucide-react';

interface InlineNoticeProps {
  variant?: 'info' | 'success' | 'warning' | 'error';
  title?: string;
  message: string;
}

export function InlineNotice({
  variant = 'info',
  title,
  message,
}: InlineNoticeProps) {
  const variants = {
    info: {
      intent: 'primary' as const,
      icon: Info,
    },
    success: {
      intent: 'success' as const,
      icon: CheckCircle,
    },
    warning: {
      intent: 'warning' as const,
      icon: AlertTriangle,
    },
    error: {
      intent: 'critical' as const,
      icon: AlertCircle,
    },
  };

  const config = variants[variant];

  return (
    <Box
      padding={4}
      rounded="lg"
      bg="var(--ui-color-bg-surface-muted)"
      style={{ border: '1px solid var(--ui-color-border-default)' }}
    >
      <Box display="flex" gap={3} alignItems="start">
        <Icon icon={config.icon} size={5} intent={config.intent} />
        <Box>
          {title && (
            <Text weight="bold" variant="high" block marginBottom={1}>
              {title}
            </Text>
          )}
          <Text size="sm" variant="med" block>
            {message}
          </Text>
        </Box>
      </Box>
    </Box>
  );
}