import { Image, Text, View } from 'react-native'
import styled from 'styled-components'

export const WrapperRecipeCard = styled(View)`
    box-shadow: ${({theme})=> theme.colors.shadow};
    display: flex;
    flex:1;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    position: relative;

    margin: 5px;
    height: 130px;
    min-width: 130px;
    max-width: 200px;
    background-color: ${props => props.theme.colors.dp01 + 'dd'};
    border-radius: 20px;
`

export const RecipeName = styled(Text)`
    position: absolute;
    bottom: 0px;
    width: 100%;
    flex:1;
    max-height: 70px;
    padding: 5px;

    font-size: 18px;
    color: ${props => props.theme.colors.textW4};
    background-color: ${props => props.theme.colors.dp00 + 'dd'};
`

export const ImageRecipe = styled(Image)`
    object-fit: cover;
    width: 100%;
    height: 100%;
    border-radius: 20px;
`