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

export interface QuickActionLinkProps {
  label?: string;
  icon?: LucideIcon;
  href: string;
  children?: React.ReactNode;
  variant?: string;
}

export const QuickActionLink = ({ 
  label, 
  icon, 
  href,
  children,
  variant
}: QuickActionLinkProps) => {
  return (
    <Link href={href} underline="none">
      <Box 
        display="flex" 
        alignItems="center" 
        gap={3} 
        paddingY={2}
        className="group"
      >
        {children ? children : (
          <>
            {icon && <Icon icon={icon} size={4} intent="low" className="group-hover:text-[var(--ui-color-intent-primary)] transition-colors" />}
            <Text size="sm" variant="med" className="group-hover:text-[var(--ui-color-text-high)] transition-colors">
              {label}
            </Text>
            <Icon icon={ArrowRight} size={3} intent="low" className="opacity-0 group-hover:opacity-100 group-hover:translate-x-1 transition-all" />
          </>
        )}
      </Box>
    </Link>
  );
};