import { Platform } from 'react-native';
import { cva, type VariantProps } from 'class-variance-authority';
import { TRANSITION_COLORS } from '../../styles/constants';

export const linkRootVariants = cva([
  'flex-row items-center gap-1',
  Platform.select({ web: 'web:inline-flex web:self-start', default: '' }),
  TRANSITION_COLORS,
  'web:outline-none web:focus:outline-none web:focus-visible:outline-none',
  'web:data-[focus-visible=true]:rounded-[2px]',
  'web:data-[focus-visible=true]:ring-2 web:data-[focus-visible=true]:ring-stroke-focus web:data-[focus-visible=true]:ring-offset-2',
  // Web: set color on the anchor so Label/Icon can text-inherit (incl. browser :visited).
  'web:text-content-link',
  'web:visited:text-content-link-visited',
  'web:hover:text-content-primary',
  'web:visited:hover:text-content-primary',
  'data-[visited=true]:text-content-link-visited',
  'web:data-[hover=true]:text-content-primary',
]);

export const linkLabelVariants = cva(
  [
    'body-md',
    Platform.select({ web: 'underline underline-offset-4', default: '' }),
    Platform.select({ web: 'text-inherit', default: 'text-content-link' }),
  ],
  {
    variants: {
      visited: {
        true: Platform.select({ web: '', default: 'text-content-link-visited' }),
        false: '',
      },
    },
    defaultVariants: { visited: false },
  },
);

export const linkNativeUnderlineVariants = cva(['border-b border-content-link pb-0.5'], {
  variants: {
    visited: {
      true: 'border-content-link-visited',
      false: '',
    },
  },
  defaultVariants: { visited: false },
});

export const linkIconVariants = cva(['size-4', 'text-content-link'], {
  variants: {
    visited: {
      true: Platform.select({ web: '', default: 'text-content-link-visited' }),
      false: '',
    },
  },
  defaultVariants: { visited: false },
});

export type LinkVariantProps = VariantProps<typeof linkLabelVariants>;