import * as React from 'react';

import { cn } from '@workspace/ui/lib/utils';

// Define types for callout variants
type CalloutVariant = 'default' | 'info' | 'warning' | 'error' | 'success';

interface CalloutProps extends React.HTMLAttributes<HTMLDivElement> {
  variant?: CalloutVariant;
  icon?: React.ReactNode; // Optional icon
}

export function Callout({
  className,
  variant = 'default',
  icon,
  children,
  ...props
}: CalloutProps) {
  // Define styles based on variant
  const variantStyles = {
    default: 'border bg-muted/30',
    info: 'border-blue-500/30 bg-blue-500/10 text-blue-500 dark:border-blue-500/50 dark:bg-blue-500/20 dark:text-blue-300',
    warning: 'border-yellow-500/30 bg-yellow-500/10 text-yellow-500 dark:border-yellow-500/50 dark:bg-yellow-500/20 dark:text-yellow-300',
    error: 'border-red-500/30 bg-red-500/10 text-red-500 dark:border-red-500/50 dark:bg-red-500/20 dark:text-red-300',
    success: 'border-green-500/30 bg-green-500/10 text-green-500 dark:border-green-500/50 dark:bg-green-500/20 dark:text-green-300',
  };

  const iconVariantStyles = {
    info: 'text-blue-500 dark:text-blue-300',
    warning: 'text-yellow-500 dark:text-yellow-300',
    error: 'text-red-500 dark:text-red-300',
    success: 'text-green-500 dark:text-green-300',
    default: '', // Default inherits text color
  };

  return (
    <div
      role="note" // Accessibility: indicates this is a note/callout
      className={cn(
        "my-6 flex items-start rounded-lg border p-4 leading-normal",
        variantStyles[variant],
        className
      )}
      {...props}
    >
      {icon && (
        <span className={cn("mr-3 text-lg", iconVariantStyles[variant])}>
          {icon}
        </span>
      )}
      <div>{children}</div>
    </div>
  );
}