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

export interface QuickActionLinkProps {
  label: string;
  icon: LucideIcon;
  href: string;
}

export const QuickActionLink = ({ 
  label, 
  icon, 
  href 
}: QuickActionLinkProps) => {
  return (
    <Link href={href} underline="none">
      <Box 
        display="flex" 
        alignItems="center" 
        gap={3} 
        paddingY={2}
        className="group"
      >
        <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>
  );
};