import { Card } from "./Card.tsx";
import { Text } from "./Text.tsx";
import { CheckCircle2, XCircle } from "lucide-preact";

interface FlashMessageProps {
  type: "success" | "error";
  message: string;
  className?: string;
}

export function FlashMessage(
  { type, message, className = "" }: FlashMessageProps,
) {
  if (type === "success") {
    return (
      <Card padding="sm" className={`mb-4 bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-800 ${className}`}>
        <div className="flex items-center gap-3">
          <CheckCircle2
            size={20}
            className="flex-shrink-0"
            style={{ fill: '#16a34a', stroke: 'white', strokeWidth: 1 }}
          />
          <Text variant="success" className="flex-1">
            {message}
          </Text>
        </div>
      </Card>
    );
  }

  return (
    <Card padding="sm" className={`mb-4 bg-red-50 dark:bg-red-900/20 border-red-200 dark:border-red-800 ${className}`}>
      <div className="flex items-center gap-3">
        <XCircle
          size={20}
          className="flex-shrink-0"
          style={{ fill: '#dc2626', stroke: 'white', strokeWidth: 1 }}
        />
        <Text variant="error" className="flex-1">
          {message}
        </Text>
      </div>
    </Card>
  );
}