import { Image, Text, TextInput, View } from "react-native"
import styled from 'styled-components'
import { GiHotMeal, GiMeal, GiCookingPot } from 'react-icons/gi'
import { HiCheck } from 'react-icons/hi'
import { BiImageAdd } from 'react-icons/bi'

export const Wrapper = styled(View)`
    display: flex;
    flex-direction: column;
    align-items: center;
    @media ${({ theme }) => theme.mediaQueries.below768}{
        align-items: flex-start;
    }
`
export const WrapperRecipe = styled(View)`
    display: flex;
    flex-direction: column;

    align-items: flex-start;
    width: 500px;
    padding: 10px;
    #row{
        margin-top: 5px;
        display: flex;
        flex-direction: row;
        width: 100%;
        align-items: flex-end;
    }
    #column{
        margin-left: 5px;
        margin-bottom: -3px;
        display: flex;
        flex-direction: column;
        width: 100%;
        justify-content: flex-end;
    }
    @media ${({ theme }) => theme.mediaQueries.below768}{
        width: 100%;
    }
`
export const Input = styled(TextInput)`
    flex:1;
    margin-left: 5px;

    color: ${props => props.theme.colors.textW1};
    border-bottom-color: ${props => props.theme.colors.primary + 'aa'};
    border-bottom-width: 1px;
    font-size: ${({theme}) => theme.fontSize.fontS};

    width: 100%;
`

export const InputInstructions = styled(Text)`
    margin-top: 30px;
    padding: 5px;

    color: ${props => props.theme.colors.textW1};
    border-top: solid ${props => props.theme.colors.primary + 'aa'} 1px;
    border-bottom-color: ${props => props.theme.colors.primary + 'aa'};
    border-bottom-width: 1px;
    font-size: ${({theme}) => theme.fontSize.fontS};
    min-height: 600px;
    width: 100%;
`
export const StyledImage = styled(Image)`
    object-fit: cover;
    width: 100px;
    height: 100px;
`
export const IconRecipe = styled(GiHotMeal)`
    color: ${({ theme }) => theme.colors.primaryVar};
    font-size: ${({theme}) => theme.fontSize.fontM};
`
export const IconPot = styled(GiCookingPot)`
    color: ${({ theme }) => theme.colors.primaryVar};
    font-size: ${({theme}) => theme.fontSize.fontM};
`
export const IconMeal = styled(GiMeal)`
    margin-left: 5px;
    color: ${({ theme }) => theme.colors.primaryVar};
    font-size: ${({theme}) => theme.fontSize.fontM};
`
export const IconImage = styled(BiImageAdd)`
    color: ${({ theme }) => theme.colors.primaryVar};
    font-size: ${({theme}) => theme.fontSize.fontM};
`
export const IconCheck = styled(HiCheck)`
    margin-right: 10px;
    color: ${({ theme }) => theme.colors.textB3};
    background-color: ${({ theme }) => theme.colors.primary + 'cc'};
    border-radius: 30px;
    min-width:  40px;
    height:     40px;
    font-size: ${({theme}) => theme.fontSize.fontL};
`