import { defineRecipe } from '@pandacss/dev'

export const linkRecipe = defineRecipe({
  className:'link',
  base: {
    cursor: 'pointer',
    textDecoration: 'underline',
    _focus: { outline: 'none' },
    '&:focus-visible': { outline: '2px solid currentColor', outlineOffset: '2px' },
  },
  variants: {
    color: {
      neutral: { color: 'neutral', '&:hover': { color: 'color-mix(in oklab, token(colors.neutral) 80%, #000)' } },
      primary: { color: 'primary', '&:hover': { color: 'color-mix(in oklab, token(colors.primary) 80%, #000)' } },
      secondary: { color: 'secondary', '&:hover': { color: 'color-mix(in oklab, token(colors.secondary) 80%, #000)' } },
      accent: { color: 'accent', '&:hover': { color: 'color-mix(in oklab, token(colors.accent) 80%, #000)' } },
      info: { color: 'info', '&:hover': { color: 'color-mix(in oklab, token(colors.info) 80%, #000)' } },
      success: { color: 'success', '&:hover': { color: 'color-mix(in oklab, token(colors.success) 80%, #000)' } },
      warning: { color: 'warning', '&:hover': { color: 'color-mix(in oklab, token(colors.warning) 80%, #000)' } },
      error: { color: 'error', '&:hover': { color: 'color-mix(in oklab, token(colors.error) 80%, #000)' } },
    },
    // Matches the original's `.link-hover` modifier: no underline until hovered.
    hover: {
      true: { textDecoration: 'none', _hover: { textDecoration: 'underline' } },
      false: {},
    },
    // Never underline (not even on hover). Useful in contexts where the
    // underline doesn't belong — e.g. inside a Navbar (NavbarLink applies it
    // as a default, same way Drawer conditions Modal).
    noUnderline: {
      true: {
        textDecoration: 'none',
        _hover: { textDecoration: 'none' },
      },
      false: {},
    },
  },
  defaultVariants: {
    // The Link component defaults hover=true in JS (see src/components/Link);
    // it is mirrored here so a direct call to link({}) matches.
    hover: true,
    noUnderline: false,
  },
})