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

interface SidebarActionLinkProps {
  href: string;
  icon: LucideIcon;
  label: string;
  iconColor?: string;
  iconBgColor?: string;
}

export function SidebarActionLink({
  href,
  icon,
  label,
  iconColor = 'text-primary-blue',
  iconBgColor = 'bg-primary-blue/10',
}: SidebarActionLinkProps) {
  return (
    <Link
      href={href}
      variant="ghost"
      block
      className="flex items-center gap-3 p-3 rounded-lg bg-deep-graphite hover:bg-iron-gray/50 transition-all"
    >
      <Box p={2} className={iconBgColor} rounded="lg" display="flex" center>
        <Icon icon={icon} size={4} className={iconColor} />
      </Box>
      <Text size="sm" color="text-white" flexGrow={1}>{label}</Text>
      <Icon icon={ChevronRight} size={4} color="text-gray-500" />
    </Link>
  );
}