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

export const StyledFeaturedCollectionCard = styled.div<Partial<IFeaturedCollectionCard>>`
  cursor: pointer;
  display: flex;
  aspect-ratio: 3/2;
  position: relative;
  width: 100%;
  min-height: 218px;

  color: ${colors.white};
  img {
    width: 100%;
    object-fit: cover;
  }
  .info-box {
    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%;
      }
    }

    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 8px;
    padding: 16px;
  }
`

StyledButton.defaultProps = {
  title: 'teste'
}