import { ICategoriesCard } from './CategoriesCard.interface'
import { StyledButton } from '../../atoms/Button/Button.theme'
import { colors } from '@/styles/variables'
import styled from 'styled-components'

export const StyledCategoriesCard = styled.div<Partial<ICategoriesCard>>`
  cursor: pointer;
  display: flex;
  aspect-ratio: 2/3;
  position: relative;
  max-width: 100%;
  color: ${colors.white};
  img {
    width: 100%;
    object-fit: cover;
  }
  .info-box {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 8px;
    padding: 16px;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
    background-image: linear-gradient(
      0deg,
      ${colors.black} 0%,
      rgba(33, 33, 33, 0.5) 44.35%,
      rgba(33, 33, 33, 0) 68.35%
      
    );

    &:hover {
    button {
      width: 100%;
      color: ${colors.white};
        &:before{
          transform: scaleX(1);
        }
    }
  }
  }
  &:hover {
    button {
      width: 100%;
      color: ${colors.white};
        &:before{
          transform: scaleX(1);
        }
    }
  }
`