<script>import { classNames } from '../../functions/classNames';
const [className] = classNames('Avatar');
export let label = '';
export let theme = 'default';
export let size = 'md';
export let rounded = false;
export let image = '';
</script>

<div class={[className, theme, size].join(' ')} class:noLabel={!label} class:rounded on:click>
	<slot>
		{#if !image && label}
			<span>{label}</span>
		{/if}
		{#if image}
			<img src={image} alt={label} title={label} />
		{/if}
	</slot>
</div>

<style>div {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
div img, div {
  border-radius: var(--ui-border-default);
}

img {
  width: 100%;
  height: 100%;
}

.noLabel span {
  display: none;
}

.rounded img, .rounded {
  border-radius: 100%;
}

.xl {
  width: 4rem;
  height: 4rem;
  font-size: 2rem;
}

.lg {
  width: 3rem;
  height: 3rem;
  font-size: 1.5rem;
}

.md {
  width: 2rem;
  height: 2rem;
  font-size: 1rem;
}

.primary {
  background-color: var(--ui-primary);
  color: var(--ui-theme-primary);
}
.primary:hover {
  opacity: 0.9;
}

.secondary {
  background-color: var(--ui-secondary);
  color: var(--ui-theme-primary);
}
.secondary:hover {
  opacity: 0.9;
}

.danger {
  background-color: var(--ui-danger);
  color: var(--ui-theme-primary);
}
.danger:hover {
  opacity: 0.9;
}

.info {
  background-color: var(--ui-info);
  color: var(--ui-theme-primary);
}
.info:hover {
  opacity: 0.9;
}

.success {
  background-color: var(--ui-success);
  color: var(--ui-theme-primary);
}
.success:hover {
  opacity: 0.9;
}

.warning {
  background-color: var(--ui-warning);
  color: var(--ui-theme-primary);
}
.warning:hover {
  opacity: 0.9;
}

.default {
  background-color: var(--ui-default);
  color: var(--ui-theme-primary);
}
.default:hover {
  opacity: 0.9;
}

.dark {
  background-color: var(--ui-dark);
  color: var(--ui-theme-primary);
}
.dark:hover {
  opacity: 0.9;
}

.white {
  background-color: var(--ui-white);
  color: var(--ui-theme-primary);
}
.white:hover {
  opacity: 0.9;
}</style>
