import styled, { css } from 'styled-components'

import { IFinishesCard, IStyledClampLine } from './FinishesCard.interface'
import { colors } from '@/styles/variables'

export const StyledClampLine = styled.div<IStyledClampLine>`
  display: -webkit-box;
  -webkit-line-clamp: ${props =>
    props.$clampLine ? props.$clampLine : 3}; /* Limit to 3 lines */
  -webkit-box-orient: vertical;
  overflow: hidden;

  transition: max-height 2s ease-out;
  max-height: ${props =>
    props.$clampLine
      ? props.$clampLine * 1.2
      : 3 *
      1.2}rem; /* Adjust multiplier based on your font-size and line-height */
`

export const StyledFinishesCard = styled.div<Partial<IFinishesCard>>`
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  color: ${colors.white};
  /* padding:16px; */
  transition: all 0.6s ease-out;

  .image-element {
    position: relative;
    width: 100%;
    overflow:hidden;

    img {
      /* aspect-ratio: ${props => (props.variant === 'regular' ? css`3/2` : css`auto`)}; */
      /* background-image: linear-gradient(lightgray 0%, lightgray 50%); */
      transition: opacity 0.6s, transform 0.6s;
      backface-visibility: hidden;
    }
  }

  

  .clamp-line {
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Limit to 3 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .text-no-wrap {
    white-space: nowrap;
  }

  .separator-bottom{
    margin-top:auto;
  }
  &:hover {
    img {
      opacity: 0.4;
      transform: scale3d(1.1, 1.1, 1);
    }

    button {
      &:before {
        transform: scaleX(1);
      }
    }
  }
`