import Image from "next/image"
import Link from "next/link"
import styled from "styled-components"

import { FlexContainer } from "@/components/shared/components"

export const CardLink = styled(Link)`
  text-decoration: none;
  color: inherit;
  display: block;
  width: 100%;
  max-width: 60rem;
`

export const CardContainer = styled(FlexContainer)`
  gap: 1.6rem;
  cursor: pointer;
  align-items: center;
  flex-direction: column;
  min-width: 60rem;
  overflow: hidden;
  position: relative;

  @media (max-width: 768px) {
    min-width: auto;
    width: 100%;
  }

  &:hover {
    .image-zoom {
      transform: scale(1.1);
    }

    .image-zoom-container {
      transition: all 300ms ease-in-out;
      border: 0.75px solid ${({ theme }) => theme.colors.gray300};
    }
  }
`

export const ImageContainer = styled.div`
  width: 100%;
  border-radius: 0.8rem;
  border: 0.75px solid ${({ theme }) => theme.colors.gray600};
  overflow: hidden;
`

export const StyledImage = styled(Image)`
  transition: transform 0.3s ease;
  object-fit: cover;
  width: 100%;
  height: auto;
  display: block;
`