import styled from '@emotion/styled';
import { Link } from '@inertiajs/react';
import { rgba } from '~/lib/color';

export const Item = styled.div(({ theme }) => ({
  userSelect: 'none',
  height: '40px',
  width: '250px',
  color: theme.colors.font,
  backgroundColor: theme.colors.background,
  padding: '8px 12px',
  borderRadius: theme.border.radius,
  display: 'flex',
  gap: '.75em',
  alignItems: 'center',

  '& > svg': {
    height: '24px',
    width: '24px',
  },

  // Disable hover effect for UserCard
  '&:hover:not(.disable-hover)': {
    cursor: 'pointer',
    backgroundColor: rgba(theme.colors.font, 0.1),
  },
}));

export const ItemLink = Item.withComponent(Link);
