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

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