"use client";

import { AlertTriangle, CheckCircle2, XCircle } from "lucide-react";

type FieldMessageVariant = "error" | "warning" | "success";

const fieldMessageStyles: Record<
  FieldMessageVariant,
  { color: string; icon: React.ReactNode }
> = {
  error: {
    color: "text-[#f53f3f]",
    icon: <XCircle className="h-4 w-4 text-[#f53f3f]" />,
  },
  warning: {
    color: "text-[#ff7d00]",
    icon: <AlertTriangle className="h-4 w-4 text-[#ff7d00]" />,
  },
  success: {
    color: "text-[#00b42a]",
    icon: <CheckCircle2 className="h-4 w-4 text-[#00b42a]" />,
  },
};

export type FieldMessageProps = {
  variant: FieldMessageVariant;
  message: string;
};

export function FieldMessage({ variant, message }: FieldMessageProps) {
  const styles = fieldMessageStyles[variant];

  return (
    <div className={`mt-2 flex items-center gap-2 text-sm ${styles.color}`}>
      {styles.icon}
      {message}
    </div>
  );
}