import styled, { css } from 'styled-components';

import { BubbleMenu, BubbleMenuProps } from '@tiptap/react';
import { Link } from '@strapi/design-system';
import { ActiveButton } from '../Toolbar/Buttons/styles';

interface IBubbleMenuLink extends BubbleMenuProps {
	hide?: boolean;
}

export const BubbleMenuLink = styled(BubbleMenu)<IBubbleMenuLink>`
	display: flex;
	align-items: flex-start;
	gap: ${8 / 16}em;
	padding: ${6 / 16}em;
	border-radius: 4px;
	border: 1px solid ${({ theme }) => theme.colors.neutral200};
	background-color: ${({ theme }) => theme.colors.neutral100};

	visibility: ${({ hide }) => (hide ? 'hidden !important' : 'visible')};

	${ActiveButton} {
		font-size: ${18 / 16}em;
	}

	a,
	a:visited,
	a:hover {
		color: ${({ theme }) => theme.colors.secondary600};
	}
`;

export const ExternalLink = styled(Link)`
	${() => css`
		align-self: center;
		> span:first-child {
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			max-width: 160px;
			order: 1;
			margin-left: 8px;
		}

		> span:last-child {
			f
		}
	`}
`;