import styled from '@emotion/styled';
import { Link } from '@inertiajs/react';

const DropdownItemBase = styled('div', {
  shouldForwardProp: (propName) => propName !== 'danger',
})<{ danger?: boolean }>(({ theme, danger }) => ({
  fontSize: '14px',
  whiteSpace: 'nowrap',
  color: danger ? theme.colors.lightRed : theme.colors.primary,
  padding: '8px 12px',
  borderRadius: theme.border.radius,

  '&:hover': {
    backgroundColor: theme.colors.background,
  },
}));

const DropdownItemButton = styled(DropdownItemBase)({
  display: 'flex',
  gap: '0.75em',
  alignItems: 'center',
});

const DropdownItemLink = styled(DropdownItemBase.withComponent(Link))({
  width: '100%',
  display: 'flex',
  gap: '0.75em',
  alignItems: 'center',
});

export { DropdownItemButton, DropdownItemLink };
