'use client';

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

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

export function InlineNotice({
  variant = 'info',
  title,
  message,
  mb,
}: InlineNoticeProps) {
  const variants = {
    info: {
      bg: 'bg-primary-blue/10',
      border: 'border-primary-blue/30',
      text: 'text-primary-blue',
      icon: Info,
    },
    success: {
      bg: 'bg-performance-green/10',
      border: 'border-performance-green/30',
      text: 'text-performance-green',
      icon: CheckCircle,
    },
    warning: {
      bg: 'bg-warning-amber/10',
      border: 'border-warning-amber/30',
      text: 'text-warning-amber',
      icon: AlertTriangle,
    },
    error: {
      bg: 'bg-racing-red/10',
      border: 'border-racing-red/30',
      text: 'text-racing-red',
      icon: AlertCircle,
    },
  };

  const config = variants[variant];
  const Icon = config.icon;

  return (
    <Box
      p={4}
      rounded="lg"
      bg={config.bg}
      border
      borderColor={config.border}
      mb={mb}
    >
      <Stack direction="row" gap={3} align="start">
        <Icon className={`w-5 h-5 ${config.text} mt-0.5`} />
        <Box>
          {title && (
            <Text weight="semibold" color="text-white" block mb={1}>
              {title}
            </Text>
          )}
          <Text size="sm" color="text-gray-300" block>
            {message}
          </Text>
        </Box>
      </Stack>
    </Box>
  );
}