import { LucideIcon } from 'lucide-react';
import { ReactNode } from 'react';
import { Box } from './Box';
import { Icon } from './Icon';
import { Link } from './Link';
import { Surface } from './Surface';
import { Text } from './Text';

export interface UserDropdownProps {
  children: ReactNode;
  isOpen: boolean;
}

export const UserDropdown = ({ children, isOpen }: UserDropdownProps) => {
  if (!isOpen) return null;

  return (
    <Box 
      position="absolute" 
      style={{ right: 0, top: '100%', marginTop: '0.5rem', width: '14rem', zIndex: 50 }}
    >
      <Surface variant="muted" rounded="xl" shadow="xl" style={{ border: '1px solid var(--ui-color-border-default)', overflow: 'hidden' }}>
        {children}
      </Surface>
    </Box>
  );
};

export interface UserDropdownHeaderProps {
  children: ReactNode;
  variant?: 'default' | 'demo';
}

export const UserDropdownHeader = ({ children, variant = 'default' }: UserDropdownHeaderProps) => (
  <Box 
    padding={4} 
    style={{ 
      borderBottom: '1px solid var(--ui-color-border-default)',
      background: variant === 'demo' ? 'rgba(25, 140, 255, 0.05)' : 'transparent'
    }}
  >
    {children}
  </Box>
);

export interface UserDropdownItemProps {
  icon?: LucideIcon;
  label: string;
  href?: string;
  onClick?: () => void;
  intent?: 'primary' | 'low' | 'critical' | 'success' | 'telemetry' | 'warning';
}

export const UserDropdownItem = ({ icon, label, href, onClick, intent = 'low' }: UserDropdownItemProps) => {
  const content = (
    <Box display="flex" alignItems="center" gap={3} paddingX={4} paddingY={2.5} style={{ cursor: 'pointer' }}>
      {icon && <Icon icon={icon} size={4} intent={intent as any} />}
      <Text size="sm" variant={intent === 'critical' ? 'critical' : (intent === 'low' ? 'med' : intent as any)}>{label}</Text>
    </Box>
  );

  if (href) {
    return (
      <Link href={href} block underline="none" onClick={onClick}>
        {content}
      </Link>
    );
  }

  return (
    <Box as="button" onClick={onClick} fullWidth style={{ textAlign: 'left', background: 'transparent', border: 'none' }}>
      {content}
    </Box>
  );
};

export interface UserDropdownFooterProps {
  children: ReactNode;
}

export const UserDropdownFooter = ({ children }: UserDropdownFooterProps) => (
  <Box style={{ borderTop: '1px solid var(--ui-color-border-default)' }}>
    {children}
  </Box>
);