import styled from '@emotion/styled'
import { css, keyframes } from '@emotion/react'

// Правильное определение анимации с помощью keyframes
const fadeIn = keyframes`
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
`

const pulse = keyframes`
  0% {
    box-shadow: 0 0 0 0 rgba(72, 187, 120, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(72, 187, 120, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(72, 187, 120, 0);
  }
`

export const Avatar = styled.img`
  width: 100%;
  height: 100%;
  border-radius: 12px;
  object-fit: cover;
  transition: transform 0.3s ease;
`

export const NameOverlay = styled.div`
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 8px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  color: white;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  opacity: 0.9;
  transition: opacity 0.3s ease;
  
  .chakra-ui-dark & {
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
  }
`

// Стили без интерполяций компонентов
export const Wrapper = styled.div<{ warn?: boolean; width?: string | number; position?: string }>`
  list-style: none;
  position: relative;
  border-radius: 12px;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  cursor: pointer;
  animation: ${fadeIn} 0.5s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  
  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
  }
  
  &:hover img {
    transform: scale(1.05);
  }
  
  &:hover > div:last-of-type:not(button) {
    opacity: 1;
  }
  
  &.recent {
    animation: ${pulse} 1.5s infinite;
    border: 2px solid var(--chakra-colors-green-400);
  }
  
  .chakra-ui-dark & {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    
    &.recent {
      border: 2px solid var(--chakra-colors-green-300);
    }
  }
  
  ${({ width }) =>
    width
      ? css`
          width: ${width};
        `
      : ''}

  ${({ position }) =>
    position
      ? css`
          position: ${position};
        `
      : ''}

  ${(props) =>
    props.warn
      ? css`
          opacity: 0.7;
          filter: grayscale(0.8);
        `
      : ''}
`

export const AddMissedButton = styled.button`
  position: absolute;
  bottom: 8px;
  right: 8px;
  border: none;
  background-color: var(--chakra-colors-blue-500);
  color: white;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  opacity: 0.8;
  transition: opacity 0.3s ease, transform 0.3s ease;

  &:hover {
    cursor: pointer;
    opacity: 1;
    transform: scale(1.1);
  }
  
  .chakra-ui-dark & {
    background-color: var(--chakra-colors-blue-400);
  }
`