struct PreviewDetailView: View {

    let preview: Preview

    var body: some View {
        VStack(alignment: .leading){
            HStack{
                Image("logo-social")
                .resizable()
                .frame(width: 60, height: 60)
                .clipShape(Circle())
                .shadow(radius: 3)
                .overlay(Circle().stroke(Color.pink, lineWidth: 1))
                .padding(.leading, 5)

                VStack(alignment: .leading){
                    Text("Text upperside").font(.headline).foregroundColor(lightBlueColor)
                    Text("Text downside").foregroundColor(Color(.lightGray)).font(.subheadline)
                }

                Spacer()

                Button(action: {}){
                    Image("threeDots")
                    .resizable()
                    .frame(width: 20, height: 20)
                }
                .padding(.trailing, 5)
            }

            Image(preview.imageUrl)
            .resizable()
            .frame(width: 415, height: 415)

            HStack{
                Button(action: {}){
                    Image("heart")
                    .resizable()
                    .frame(width: 30, height: 30)
                }.padding(.leading, 5)

                Button(action: {}){
                    Image("comment")
                    .resizable()
                    .frame(width: 30, height: 30)
                }.padding(.leading, 5)

                Button(action: {}){
                    Image("paper-plane")
                    .resizable()
                    .frame(width: 30, height: 30)
                }.padding(.leading, 5)

                Spacer()

                Button(action: {}){
                    Image("flag")
                    .resizable()
                    .frame(width: 30, height: 30)
                }.padding(.trailing, 5)
            }
        }
    }
}