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 className='flex flex-col items-center w-full'>
      {'success' in message && (
        <div
          {...containerProps}
          className={cn(
            'flex flex-col items-center w-11/12 rounded-md p-2',
            'dark:bg-green-500/20 bg-green-700/20 border-2',
            'dark:border-green-500/50 border-green-700/50',
            containerProps?.className,
          )}
        >
          <p {...textProps}>{message.success}</p>
        </div>
      )}
      {'error' in message && (
        <div
          {...containerProps}
          className={cn(
            'flex flex-col items-center w-11/12 rounded-md p-2',
            'bg-destructive/20 border-2 border-destructive/80',
            containerProps?.className,
          )}
        >
          <p {...textProps}>{message.error}</p>
        </div>
      )}
      {'message' in message && (
        <div
          {...containerProps}
          className={cn(
            'flex flex-col items-center w-11/12 rounded-md p-2',
            'bg-accent/20 border-2 border-primary/80',
            containerProps?.className,
          )}
        >
          <p {...textProps}>{message.message}</p>
        </div>
      )}
    </div>
  );
};
