import { type ComponentProps } from 'react';
import { cn } from '@/lib/utils';

type Message =
| { success: string}
| { error: string}
| { message: string}

type StatusMessageProps = {
  message: Message;
  containerProps?: ComponentProps<'div'>;
  textProps?: ComponentProps<'div'>;
};

export const StatusMessage = ({
  message,
  containerProps,
  textProps,
}: StatusMessageProps) => {
  return (
    <div
      {...containerProps}
      className={cn(
        'flex flex-col gap-2 w-full\
          text-sm bg-accent rounded-md p-2 px-4',
        containerProps?.className,
      )}
    >
      {'success' in message && (
        <div
          {...textProps}
          className={cn(
          'dark:text-green-500 text-green-700',
          textProps?.className
        )}
        >
          {message.success}
        </div>
      )}
      {'error' in message && (
        <div
          {...textProps}
          className={cn('text-destructive', textProps?.className)}
        >
          {message.error}
        </div>
      )}
      {'message' in message && (
        <div
          {...textProps}
        >
          {message.message}
        </div>
      )}
    </div>
  );
};